Preventing submit until ajaxes are done

Question

I'm using jQuery, and I'd like to make it so that a form submit won't work until all ajax calls have completed.

One way I have thought of doing this would be to store a boolean value which indicates whether there is an ajax request going on. It would be set to false at the end of every one.

I'm not sure if this is the best way though, so I'd appreciate any input.

Answer 1

Rather than use boolean, you should use an integer counter (var i=0;).

i++ every time an AJAX request is made, and

i-- every time an AJAX request is completed.

The benefits of using a counter are that it will allow you to make multiple AJAX requests at a time. With boolean, it is more buggy, because making multiple requests can cause the submit button to unlock before actions are completed.

As for the user interface, you should consider using some sort of 'loading' indicator, to show that it is working. Then, once the counter is back to zero, you can hide the loading indicator and enable the submit functionality.

Answer 2

A good way of handling this:

• Change your submit button to a normal button
• Bind a function to the submit button which runs the ajax request
• Assign the success parameter of the jQuery AJAX request object to submit the form