Question

i am trying to return value from ajax request to a function on form submit.

The code is as below:

function validateEmail(){ 
        if(email.val() == "")
        {
            $("#emailerror").html("Enter Email...");
            return false;
        }
        else {
        $.ajax({
            type: "POST",
            data: "email="+email.val(),
            url:'emailcheck.php',
            beforeSend: function(){
                $("#emailerror").html("Checking Email...");
            },
            success: function(data){
                if(data == "invalid")
                {
                    $("#emailerror").html("Invalid Email");
                    return false;
                }
                else if(data != "0")
                {
                    $("#emailerror").html("Email Already Exist");
                    return false;
                }
                else
                {
                    $("#emailerror").html("OK");
                    return true;
                }
            }
        });
        }
    }

On form submit, i am calling the function and checking the return value from ajax response:

$('#myForm').submit(function(){
        if(validateEmail())
        {
            alert('returning true');
            return true;
        }
        else
        {
            return false;
        }
});

But, the code is not executed when the return value is ‘true’. The function validateEmail() return false.

Pls help me to figure out where i went wrong..

Thanks in advance.

Answer 1

The “A” in AJAX stands for “asynchronous”.

In the else branch of validateEmail, you’re launching an asynchronous request to emailcheck.php. validateEmail will return before your PHP file responds; then your emailcheck.php script does respond, jQuery will call your success callback but no one will pay attention to what it returns. The result as far as form validation is concerned, is that your validateEmail looks like this:

function validateEmail() { 
    if(email.val() == "") {
        $("#emailerror").html("Enter Email...");
        return false;
    }
    else {
        // Your $.ajax() might as well not even be here as
        // validateEmail will return before $.ajax() gets a
        // response from emailcheck.php
        return;
    }
}

You could try the async:false option for $.ajax or rework all your logic to be able to wait for the asynchronous request to return.

Furthermore, the second branch of validateEmail does not return false, it doesn’t return anything at all but that’s still not a true value.