Question

I’m trying to insert information from the form to the Database.
This is the form in html – tried both post and get.

<form id="register" action="script/register.js" method="post">
<label for="username">Username:</label>
<input type="text" name="username" id="username" placeholder="Username" />
<br>
<label for="passd">Password:</label>
<input type="password" name="passd" id="passd" placeholder="Password" />
<br>
<label for="conpassd">Password:</label>
<input type ="password" name="conpassd" id="conpassd" placeholder="re-type Password"/>
<br>
<label for="email">E-Mail:</label>
<input type="text" name="email" id="email" placeholder="Email address"/>
<br>
<br>
<button type="submit" name="submitMe" id="submitMe">Submit</button>
<button type="reset">Clear</button>
</form>

This is the script

$(document).ready(function() {
    var usernameCorrect = false;
    var passwordCorrect = false;

    function checkPassword() {
        var p1 = $("#passd").val();
        var p2 = $("#conpassd").val();
        if(p1 == p2) {
            passwordCorrect = true;
        } else {
            passwordCorrect = false;
            alert("Passwords does not match");
        }
    }

    function checkUsername() {
        var user = $("#username").val();
        var dataPass = {
            "username": user
        }
        $.ajax({
            url: "server/userExists.cgi",
            type: "GET",
            dataType: "text",
            data: dataPass,
            success: function(data) {
                var user = $.trim(data);
                if(user == "No") {
                    usernameCorrect = true;
                } else if(user == "Yes") {
                    usernameCorrect = false;
                    alert("Username already in use");
                }
            },
            error: function() {
                alert('Script Execution Error');
            },
        });
    }

    function submitForm() {
        if(usernameCorrect == true && passwordCorrect == true) {
            e.preventDefault();
            var dataPass = {
                'username': (username),
                'passd': ($("#passd").val()),
                'email': ($("#conpassd").val())
            };
            $.ajax({
                url: "server/init.cgi",
                type: "GET",
                data: dataPass,
                success: function() {
                    alert("Register successful");
                    //nextPage(username);
                },
                error: function() {
                    alert("Error!");
                },
            });
        }
    }

    $("#submitMe").click(function(e) {
        submitForm();
    });

});

Is there anyway to link the form to javascript? I don’t know any other language such as php so…
Thanks

Answer 1

A few errors

• Your form points to a JavaScript file, it should point to the server cgi script.
• You’re never calling checkUsername() and checkPassword() so usernameCorrect and passwordCorrect are still false.
• You’re hooking to the button’s click event, the better event is the form’s submit since it also fires when they hit enter in the form and you can cancel a submit and send an AJAX request instead, this way, your form also works if JavaScript is off.

Here’s what you need to change, Your HTML for the form should be

<form id="register" action="server/init.cgi" method="post">

And your script had to be adjusted slightly because of the asynchronous nature of AJAX calls, you have to use callbacks.

$(document).ready(function() {
    $('#register').on('submit', function(e){
        // so the form doesn't get sent since we are going to send it with AJAX
        e.preventDefault();

        var user = $("#username").val(), 
            pwd = $("#passd").val(), 
            pwd2 = $("#conpassd").val(),
            form = this;

        if (pwd != pwd2) {
            alert("Passwords does not match");
            return false;
        }
        var dataPass = {"username": user};
        $.ajax({
            url: "server/userExists.cgi",
            type: "GET",
            dataType: "text",
            data: dataPass,
            success: function(data) {
                var user = $.trim(data);
                    if(user == "Yes") {
                       alert("Username already in use");
                       return;
                    }
                    else {
                        submitForm();
                    }
            },
            error: function() {
                alert('Script Execution Error');
            },
        });

        function submitForm() {
            var dataPass = {'username': user,'passd': pwd,'email': ($('#email').val())};
            $.ajax({
                // no need to duplicate the URL here, the form already knows it
                url: form.action,
                type: "GET",
                data: dataPass,
                success: function() {
                    alert("Register successful");
                    //nextPage(username);
                },
                error: function() {
                    alert("Error!");
                },
            });
        }
    });
});