Untitled

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Do Its 4 - Marathon Runner</title>
    <style>
        body,
        html {
            font-family: Arial, Helvetica, sans-serif;
        }

        input[type="text"],
        input[type="password"],
        input[type="number"] {
            padding: 5px;
            border-radius: 5px;
            border: 1px solid #dddd;
            margin-bottom: 5px;
            height: 35px;
            width: 200px;
            font-size: 13px;
        }

        select {
            padding: 5px;
            border-radius: 5px;
            border: 1px solid #dddd;
            margin-bottom: 5px;
            height: 35px;
            width: 200px;
            font-size: 13px;
        }

        input[type="button"] {
            width: 200px;
            height: 35px;
            background: #333;
            border-radius: 5px;
            border: none;
            font-size: 13px;
            color: white;
            cursor: pointer;
            transition: .3s all;
        }

        input[type="button"]:hover {
            color: #333;
            background: white;
            border: 1px solid #333;
        }

        form {
            text-align: center;
            margin-top: 45vh;
        }
    </style>
</head>

<body>

    <?php
        if(!isset($_GET["name"])){
    ?>

    <form action="?" method="GET">
        <input id="name" type="text" placeholder="Name" name="name" required minlength="2" maxlength="24"><br>
        <input id="address" type="text" placeholder="Address" name="address" required minlength="1" maxlength="24"><br>
        <select id="gender" type="text" placeholder="Gender" name="gender" required>
            <option value="Male">Male</option>
            <option value="Female">Female</option>
        </select><br>
        <input id="number" type="number" placeholder="Age" name="age" max="100" min="3" required><br>
        <select id="size" name="size" required><br>
            <option value="XS">XS</option>
            <option value="S">S</option>
            <option value="M">M</option>
            <option value="L">L</option>
            <option value="XL">XL</option>
            <option value="XXL">XXL</option>
        </select><br>
        <input type="button" name="check" value="Submit">
        <p style="color: red;" id="error"></p>
    </form>

    <?php

        }else{
            $name = $_GET["name"];
            $address = $_GET["address"];
            $gender = $_GET["gender"];
            $age = $_GET["age"];
            $size = $_GET["size"];

            if(strlen($name) >= 2 && strlen($name) <= 24 && strlen($address) >= 2 && strlen($address) <= 30 && strlen($gender) >= 4 && strlen($gender) <= 6 && $age >= 3 && $age <= 100 && strlen($size) >= 1 && strlen($size) <= 3){
                echo "<div style='text-align:center; width:20vw; margin: 0 auto;'>Thanks for registration $name";
                echo "<hr>";
                $money = 50;
                if($size == "XXL"){
                    $money += 5;
                }
                if($age >= 65){
                    $money -= 10;
                }
                echo "You have to pay $money$ to enter!</div>";
            }
        }

    ?>

    <script>
        document.getElementsByName("check")[0].addEventListener("click", function() {
            let name = document.getElementById("name").value;
            let address = document.getElementById("address").value;
            let gender = document.getElementById("gender").value;
            let number = document.getElementById("number").value;
            let size = document.getElementById("size").value;

            if (name.length >= 2 && name.length <= 24 && address.length >= 2 && address.length <= 30 && gender.length >= 4 && gender.length <= 6 && number >= 1 && number <= 100 && size.length >= 1 && size.length <= 3) {
                document.getElementById("error").innerText = "";
                document.querySelector("form").submit();
            } else {
                document.getElementById("error").innerText = "Fill out all informations!";
            }
        });
    </script>
</body>

</html>