Return statement executes before ajax response

Question

I am making an ajax call on submit button click event to check field validations server side. When I get a validation fail, ajax response gives the proper error message, returns false, and stops the form to submit to the action url. But when I get a response of 'success', the form is still not submitting to the action url script.

Is this the case when return statement executes before ajax response?

And also why is the form not getting submitted?

Here is the code:

<input type="submit" onclick="return validate();" name="submit" value="Proceed" />

<script type="text/javascript">
    var flag=false;
    function validate(){

        $.ajax({
            type:"POST",
            url:"../chk.php",
            data:datastring,
            cache: false,
            success: function (result) {


                if(result.toString() == "success" ){

                    flag=true;

                }

                else{
                    $('#error').css('display', 'block');
                    $('#error').css('color','red');
                    $('#error').text(result.toString());
                    flag=false;
                }
            }

        });


        return flag;
    }
</script>

Answer 1

one Way is

use async : false

Setting async to false means that the statement you are calling has to complete before the next statement in your function can be called.

$.ajax({
            type:"POST",
            url:"../chk.php",
            data:datastring,
            cache: false,
            async : false,
            success: function (result) {

And also why are you returning the value outside the ajax function , return the value inside ajax success if you are not using async : false

 $.ajax({
            type:"POST",
            url:"../chk.php",
            data:datastring,
            cache: false,
            success: function (result) {


                if(result.toString() == "success" ){

                    flag=true;

                }

                else{
                    $('#error').css('display', 'block');
                    $('#error').css('color','red');
                    $('#error').text(result.toString());
                    flag=false;
                }
            }

             return flag;

        });

Answer 2

Ajax is asynchronous, so you should just pass a function to the function as an argument, and then execute it on success of the ajax call.

function my_callback() {
    alert('done');
}

function validate(cb) {
    $.ajax({
        /* ... */
        success: function() {
            cb();
        }
    });
}

The function you pass to validate will be executed upon the success function call.