How can I use the jQuery $.ajax function to stop or allow a form submit?

Question

$('#post_form').submit(function() {
    $("#ajax_bar_loader").show();
    $.ajax({
        url: 'add.html',
        data: $('#post_form').serialize(),
        dataType: 'json',
        type: 'post',
        success: function( result ) {
            retVal = formCheck( result );
        }
    });

    return false;
});

That's what my code looks like and instead of the "return false", I want to allow it if the data contained in "result" says to. How can I accomplish this?

Answer 1

    success: function(result) {
        ...
        document.forms.post_form.submit();
    }

Answer 2

You could do it like this:

$.ajax({
    url: 'add.html',
    data: $('#post_form').serialize(),
    dataType: 'json',
    type: 'post',
    success: function( result ) {
        retVal = formCheck( result );
        if(retVal)
          $('#post_form').unbind('submit').submit();
        else
          alert('Error with your form! Oh crap!');
    }
});

Since you're posting back and leaving, this just unbinds this handler if successful and lets the submit happen normally when invoking it, so the code doesn't run and check again, it just submits.

Answer 3

I would suggest always returning false at the end of the event handler in order to prevent normal form submission. Within the success callback to $.ajax, you could conditionally redirect based on the response from the server:

$('#post_form').submit(function() {
    $("#ajax_bar_loader").show();
    $.ajax({
        url: 'add.html',
        data: $('#post_form').serialize(),
        dataType: 'json',
        type: 'post',
        success: function( result ) {
            if(result == 'something') {
                alert("some error happened");
            } else {
                // assuming we're visiting the form's action
                window.location.href = $(this).attr("action");
            }
        }
    });
    return false;
});

Relying on the success callback to fire before the submit handler completes execution is unrealistic, since the code following the $.ajax call is very likely to be evaluated before the success callback executes ($.ajax will run asynchronously).

Answer 4

I'm not sure if this will work for your problem but what if you made the ajax request synchronous?

I got this dummy code to "work", it fires the ajax request and then sets a boolean. Then the form returns true or false based on the boolean:

$(document).ready(function() {
    $('form').submit(function() {
        var should_return = false;
        $.ajax({
            async: false,
            url: 'test.php',
            type: 'post',
            success: function() {
                // Do some type of check
                should_return = true;
            }
        });
        return should_return;
    });
});