why “return false;” or “event.preDefualt();” doesn't work after $.post();?

Question

why "return false;" or "event.preDefualt();" doesn't work after $.post(); Firstly,I simply written a return false after $(#id).submit(function(e){ return false;}// it works properly .But when i call something via $.post('check-email.php',{parameter},function{data}) and i try to write return false after that $.post call.It doesn't works and directly goes to next page. here is my code:-

$(document).ready(function () { //newly added 
    $('#mysignupform').submit(function (event) {
        return false;
        or event.preDfault(); // only work here
        var emailVal = $('#inputEmail').val(); // assuming this is a input text field
        //alert(emailVal);
        $.post('check-email.php', {
            'email': emailVal
        }, function (data) {
            alert(data);
            if (data == 'false') {
                $("#mysignupform").submit(function (event) {
                    return false;
                    or event.preventDefault(); //both doesnt work here..why??
                    ;
                });
            } else {
                $("#mysingupform").submit(function () {
                    return false;
                }); //retrun false doesnt work here..why??
            }
        });
    });
});

I dont want to allow them to submit but still its happening. Please help me..! Thanks in advance..

Answer 1

Because $.post is asynchronous . Execution continues at the statement following the call to $.post immediately. Since there isn't a statement following it, the submit event handler function will simply return undefined and the browser will happily continue with the submit as if nothing happened.

The callback to asynchronous methods will only be executed some time later. In your case, that will be when the server returns a response. Since the outer function has already returned, there is nowhere for that callback function to return to .

You will need to always prevent the default action in a click event handler on the form submit button, and then re-submit the form programatically upon success in the $.post callback:

$('#mysignupform :submit').click(function (event) {
    var form = this.closest("form"); // Get a reference to the containing form
    event.preventDefault(); // Prevent the default action (form submission)
    $.post('check-email.php', { /* data */ }, function (data) {
        // If the data is good...
        form.submit(); // Submit the containing form
    });
});

Obviously you can't really do this if you're binding to the form submit event, since the re-submission of the form will trigger the event handler again and you'll be stuck in an infinite loop.

Answer 2

This should work:

$(document).ready(function () { //newly added 
    $('#mysignupform').submit(function (event) {
        // your $.post call
        $.post('check-email.php', {email: emailVal}, function (data) {
            // ...
            // having a return false means returning false to the success callback
            // of your .post call. it is not the same as returning false to the 
            // submit() callback
        });

        // return false to submit()
        return false;
    });
});

Answer 3

Ajax works asynchronous. The easy solution is bind a click event handler on the submit button.

$('#your_submit_button').click(function (event) {
    event.preventDefault();
    var emailVal = $('#inputEmail').val(); // assuming this is a input text field
    $.post('check-email.php', {
        'email': emailVal
    }, function (data) {
        if (data !== 'false') {
            // submit the form here
            $("#mysingupform").submit();
        }
    });
});

Answer 4

$.post(...) is asynchronous. Try $.ajax(async: false, ...) instead.

Answer 5

This is because the function that is executed after the post completes is executed asynchronously, ie you are no longer in the event handler.

This answer has a technique you can use - basically click the submit button again, after setting a Boolean flag to prevent your post logic from being executed twice.