Question

just trying to get a form to submit with ajax rather than an action and still having no luck. the php script works and has been testing as working through an action submit.

so far ive looked at examples, read documentation, asked SO questions, but i still have no answers. i need help with this, i was meant to have tested this use case two weeks ago now.

when i submit the page looks like it refreshes but nothing happens. the user account is not inserted into the database, and no alert boxes appear.
can anyone see what goes wrong?

the javascript looks like this:

    $(document).ready(function()
{

$.validator.addMethod("uniqueuser", function(username){
    var response
    $.ajax({
        type: "POST",
        url: "check_username.php",
        data: "username=" + username,
        success: function(server_response){


                if(server_response == '0'){

                    response = true;
                }
                else if(server_response == '1'){

                    response = false;
                }

        }
    });
    return response;
}, "Username is not available");



$("#createaccount).validate({
    debug: false,
    rules:{
        fname:{
            required: true
        }
        surname:{
            required: true
        }
        email:{
            email:true,
            required: true
        }
        location:{
            required:true
        }
        username:{
            minlength: 6,
            required:true,
            uniqueuser:true
        }
        password:{
            required:true,
            minlength: 6
        }
        re_password:{
            required:true,
            equalTo: "#password"
        }
    }


    submitHandler: function(form){
        $.ajax({
            type: 'POST',
            url: 'createaccount2.php',
            data: $("#createaccount").serialize(),
            success: function(response){

                if(response == "1"){
                    alert("That username is already taken!");
                }
                else if(response == "2"){
                    alert("An account is already registered to that email address");
                }
                else if(response == "3"){
                    alert("Your account has been created!");
                }
                else if(response == "4"){
                    alert("Something went wrong, your account could not be created");
                }
            }

        });


    });
});
});

for info on validator: http://docs.jquery.com/Plugins/Validation

Answer 1

There are a bunch of problems within the script. All of them, clearly related to the validator plugin you’re using. One is ASYNCHRONOUS CALLs.

When you use $.validator (I don’t know this plugin, can you add references?) you try to return response; which is set ASYNC. (after the AJAX gets response by server). That’s why AJAX has callbacks functions, because you don’t know when THAT is gonna be set.

What’s happening? the return gets executed before the AJAX get’s completed and modifies the variable (but the scope is fine).

The fix? You will need to dig into that validator plugin in order to see if it supports async validation.

Otherwise, you will need to setup your own script validation.