Untitled

<body>
<p id="registration">Registration</p>

<script type="text/javascript">
    function register() {
        var client = {
            email: document.getElementById('email').value,
            name: document.getElementById('name').value,
            birthday: document.getElementById('birthday').value,
            card: {
                number: document.getElementById('cardNumber').value,
                status: document.getElementById('status').value
            },
            security: {
                password: document.getElementById('password').value,
                codeWord: document.getElementById('codeword').value
            }
        };

        var jsonClient = JSON.stringify(client);
        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'rs/register/register', true);
        xhr.setRequestHeader('Content-Type', "application/json");

        xhr.send(jsonClient);

        xhr.onload = function () {
            if (xhr.status == 200) {
                alert("Success registration!\nNow log in to your account")
                window.location.replace("index.html");
            } else if (xhr.status == 500) {
                alert("Wrong data");
            } else {
                alert("Error: " + xhr.status);
            }
        };
    }

    function getCardNumber() {
        var xhr = new XMLHttpRequest();

        xhr.open('GET', 'rs/register/cardnumber', true);
        xhr.send();

        xhr.onload = function () {
            if (xhr.status == 200) {
                document.getElementById('cardNumber').value = xhr.response;
            } else {
                alert("Error: " + xhr.status);
            }
        };
    }
</script>


<fieldset id="login_form">
    <p>
        <label for="email">Email</label>
        <input type="email" name="email" id="email">
    </p>
    <p>
        <label for="password">Password</label>
        <input type="password" name="password" id="password">
    </p>
    <p>
        <label for="name">Name</label>
        <input type="text" name="name" id="name">
    </p>
    <p>
        <label for="birthday">Birthday</label>
        <input type="date" name="birthday" id="birthday">
    </p>
    <p>
        <label for="codeword">Codeword</label>
        <input type="text" name="Code word" id="codeword">
    </p>
    <p>
        <label for="cardNumber">Card number</label>
        <input type="number" name="cardNumber" id="cardNumber">
        <button type="button" name="Generate" onclick="getCardNumber()">Generate card number</button>
    </p>
<!--TODO: сделать выпадающий список с credit/debit Сделать генератор-->
    <p>
        <label for="cardStatus">Card status</label>
        <input type="text" name="cardStatus" id="cardStatus">
    </p>

    <p>
        <label for="cnn">cnn</label>
        <input type="text" name="cnn" id="cnn">
    </p>

    <button type="submit" name="Register" onclick="register()">Register</button>


</fieldset>
</body>