Validate form, check if user exists, register them. All with Ajax

Question

My javascript is inside an html file called register.html. The user submits the form. This should then trigger the $('input[name="createacc"]').click(function (e) AJAX then sends those 4 variables to checkuser.php. Checkuser.php should then check to see if the username exists. If it does exist, it should echo 0. If it does not exists, it should echo 1. Register.html then checks to see what checkuser.php echoed. If the echo was "0" then, then an alert box should appear saying username unavailable. If the echo was "1" or anything else, register.html should run $("#registerform").submit(); which then does the php script. This should all happen without leaving the register.html page.

I check chrome's built in debugger and I see that if the account exists checkuser.php writes back 0 and if the account doesn't it writes back 1. But for some reason nothing else happens. The account does not register nor do I get an alert box saying the username is unavailable

here is my register.html

<form ata-parsley-validate name="registerform" id="registerform" action="register.php" method="post">

                        <p>
                            <label for="firstname">First Name:</label>
                            <input name="firstname" id="firstname" maxlength="32" type="text" placeholder="Optional" />
                        </p>
                        <p>
                            <label for="username" id="usernameText">Username:</label>
                            <input data-parsley-pattern="^[A-Za-z0-9_]{3,15}$" data-parsley-length="[3, 15]" name="username" id="username" maxlength="32" type="text" data-parsley-error-message="Username needs to be between 3 and 15 characters. Case sensitive. No special characters allowed." required/>
                        </p>
                        <p>
                            <label for="password1">Password:</label>
                            <input name="password1" id="password1" data-parsley-pattern="^[A-Za-z0-9_-]{5,25}$" data-parsley-length="[5, 25]" type="password" data-parsley-equalto="#password2" data-parsley-error-message="Passwords must match. Needs to be between 5 and 25 characters. Case sensitive. No special characters allowed." required/>
                        </p>
                        <p>
                            <label for="password2">Confirm Your Password:</label>
                            <input name="password2" id="password2" data-parsley-length="[5, 25]" data-parsley-error-message="Passwords must match. Needs to be between 5 and 25 characters. Case sensitive. No special characters allowed." data-parsley-pattern="^[A-Za-z0-9_-]{5,25}$" type="password" data-parsley-equalto="#password1" required/>
                        </p>
                        <p>
                            <label for="email">E-Mail:</label>
                            <input data-parsley-trigger="change" name="email" id="email" maxlength="1024" type="email" required/>
                        </p>
                        <p>
                            <input type="submit" id="submit" class="submit" name="createacc" value="Register" />
                        </p>
                    </form>

Here is my javascript

<script>
    $(document).ready(function () {


    $('input[name="createacc"]').click(function (e) {
        var username = $('input[name="username"]').val();
        var firstname = $('input[name="firstname"]').val();
        var password1 = $('input[name="password1"]').val();
        var email = $('input[name="email"]').val();
        e.preventDefault();
       $.ajax({
            type: 'POST',
            data: {
                username: username,
                firstname: firstname,
                password1: password1,
                email: email
            },
            url: 'checkuser.php',
            success: function (data) { //Receives the data from the php code
                if (data === "0") {
                    alert("Username Unavailable");
                } else {
                   $("#registerform").submit();
                alert("Account successfuly created"); 
                }


            },
            error: function (xhr, err) {
                console.log("readyState: " + xhr.readyState + "\nstatus: " + xhr.status);
                console.log("responseText: " + xhr.responseText);
            }
        });
    });

        });
</script>

Update - I have fixed parts of my code through the help of others below me. My only issue now is that $("#registerform").submit(); doesn't do anything

Can you can check in chrome debugger "Network" tab. There should be your request with all it's stuff including the response and response code — damienix, Dec 14 '14 at 08:48
I think because you have submitted the form before the click event runs. — svnm, Dec 14 '14 at 08:48
@steveniseki I believe that is what the `e.preventDefault();` is there for? — DanMossa, Dec 14 '14 at 08:49
@damienix https://i.imgur.com/J7w9NoC.png That is if the username exists. — DanMossa, Dec 14 '14 at 08:51

damienix · Accepted Answer · 2014-12-14T11:13:53.490

1

You are trying to return and JSON not setting

header('Content-type: application/json');

Decide whether you want to pass plaintext or json. Your string might be now "0", not 0

Try

if (data === '"0"') {

edited Dec 14 '14 at 11:13

answered Dec 14 '14 at 08:52

damienix

6,463
1
23
30

That helped. But now no matter if the username exists or not, I get a popup saying "Username Unavailable" – DanMossa Dec 14 '14 at 08:58
So what helped exactly and in what way helped if it's still not working? ;) – damienix Dec 14 '14 at 09:01
Maybe just return plaintext and check 0/1 instead of awkward "0"/"1" – damienix Dec 14 '14 at 09:02
Okay so I changed it to `if (data === '"0"') {` and now if the username already exists, I get an alert saying "Username Unavailable". and if the username does not exist, it doesn't seem to be doing anything. I know the else code works because i added a `alert("Account successfuly created");` to it but it doesn't seem to be registering – DanMossa Dec 14 '14 at 09:04
BTW, it's that inverted behaveiour of your if – damienix Dec 14 '14 at 09:05
1. Put break point in chrome debugger in line **if (data === "0") {** and check what it does. – damienix Dec 14 '14 at 09:09
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/66839/discussion-between-damienix-and-dgameman1). – damienix Dec 14 '14 at 09:12
I've realized the issue is with the $("#registerform").submit(); not doing it's job – DanMossa Dec 14 '14 at 10:55
Have you tried http://stackoverflow.com/questions/1960240/jquery-ajax-submit-form then? – damienix Dec 14 '14 at 11:05
I changed it to `$("#registerform").ajaxForm({url: 'register.php', type: 'post'})` but the console gives me an error saying "Uncaught TypeError: undefined is not a function" – DanMossa Dec 14 '14 at 11:08
You don't have ajaxForm plugin. Include the plugin or use the latter solution with $.post() – damienix Dec 14 '14 at 11:09
Oh my god. It works. You're honestly amazing. Thank you so much – DanMossa Dec 14 '14 at 11:11

Suchit kumar · Answer 2 · 2014-12-14T09:07:12.870

0

I think the problem is in your success.you have written If it does exist, it should echo 0. If it does not exists, it should echo 1.you should use:

success: function (data) { //Receives the data from the php code
                if (data == '"0"') {       //register if user exists.          
                $("#registerform").submit();
                } else {
                      alert("Username Unavailable");
                }

edited Dec 14 '14 at 09:07

answered Dec 14 '14 at 08:52

Suchit kumar

11,809
3
22
44

That helped. But now no matter if the username exists or not, I get a popup saying "Username Unavailable" – DanMossa Dec 14 '14 at 08:59
The php code returns codes differently, so OP should revert that to be consistent with internet, but its not that bug here. – damienix Dec 14 '14 at 09:00
just do console.log(data) and see what it gives. – Suchit kumar Dec 14 '14 at 09:02
I'm further now that I changed it to `if (data === '"0"') {`. Look up at damienix comments – DanMossa Dec 14 '14 at 09:06
I've realized the issue is with the $("#registerform").submit(); not doing it's job – DanMossa Dec 14 '14 at 10:53

Validate form, check if user exists, register them. All with Ajax

2 Answers2