JQuery how to resubmit form after ajax call success

Question

I am using JQuery to perform form submission through an ajax request. I use

form.submit(function() {
    if( success ) {
        return true;
    }

    validate(); //proceeds to an ajax call

    return false;
}

On request success I want to either proceed with form submission or user callback. Therefore, if the user callback is undefined, I will submit the form on form validation success (from my validate function).

config = {
    successCallback: function() {
        success = true;
        form.submit(); //does not work
    }
};

validate = function() {
    $.ajax(
        ...
        success: function(data) {
            //code logic
            config.successCallback();
        }
    );
};

The ajax success callback will call config.successCallback() and if it was never overridden by the user, it would proceed to normal form submission. I tried using an instance variable (success) to make sure 'return true' would proceed to default form submission.

Unfortunately this is not working. It seems that the 'return false' statement that prevents default form submission will neglect any further submit calls even if an instance variable was set. It only works after clicking the submit button another time (that makes it twice for it to work).

Is there any workaround for this. I want to both use a user callback when provided but proceed with default form submission when not, and since I am using an ajax function to validate the form, the ajax success callback is complicating things.

Answer 1

Make sure success is in scope, or just use form[0].submit() in your success callback to submit the DOM form and bypass the jQuery registered handler (assuming there's only one DOM form in the collection).

http://jsfiddle.net/J4nsx/

The latter method is actually how the jQuery validate plugin recommends getting around potential issues with too much recursion.