JQuery how to resubmit form after ajax call success

Posted by Steven Rosato on Stack Overflow See other posts from Stack Overflow or by Steven Rosato
Published on 2010-06-10T21:21:32Z Indexed on 2010/06/10 21:33 UTC
Read the original article Hit count: 491

Filed under:
|
|

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.

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about AJAX