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

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.

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

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.

• javascript
• jquery
• ajax

• You could make the ajax call synchronous instead of asynchronous. That'll make the script stop while it waits for a response. – Mr Meow Commented Jun 4, 2011 at 20:54
• @CleverQuack: It also freezes the UI in some browsers and worsens the user's experience. They should be avoided if possible. – icktoofay Commented Jun 4, 2011 at 20:55
• @CleverQuack: That makes the browser freeze too. I would submit the form like $('form').submit() in the success part of the last AJAX call. – pimvdb Commented Jun 4, 2011 at 20:56
• I want the calls to be asynchronous.. They should be able to continue to use the form freely until they click submit, with multiple asynchronous queries going on – Ben G Commented Jun 4, 2011 at 20:56
• 1 @babonik: So you do want them to be asynchronous, don't you? – pimvdb Commented Jun 4, 2011 at 20:57

6 Answers 6

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 pleted.

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 pleted.

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.

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

I would approach differently and check jQuery's internal $.active or $.ajax.active (depends on version) in each ajax request's callback. if $.active is 0 then there're no more active requests and then submit the form using .submit().

This questions could be useful about $.active

In your onsubmit event handler, add an event.preventDefault(). In your ajax call(s)'s onComplete (or onSuccess, depending on how you want to approach it), create an $.post ajax request which sends the forms data.

If you have multiple ajax requests, you could make a counter, and increment it after each request is plete and when the counter reaches the correct amount, perform that $.ajax post.

For example:

var totalRequests = 0;
var counter = 0;
var submit = false;

$('form').submit(function(e){
e.preventDefault();
submit = true;
submitForm();
})

// starting a random number of ajax requests
for (var c=0;c<=Math.floor(Math.random()*11);c++){
totalRequests++;
$.ajax({
  url: 'ajax/'+c+'.html',
  success: function() {
       submitForm();
  }
});

function submitForm(){
    if (counter>=totalRequests && submit){
      $.post(...);
    }
}

i would probably write my php file differently so i could do everything i needed in one ajax call, including the form submission. if you wanted the form to actualy submit and load a new page i would still change the php to do everything in one ajax call and then submit the in the ajax callback.

if u show some code it will be easier to understand

You could set the disabled attribute of the submit button to disabled when the page is first loaded, and then, after all of the AJAX queries have been through, re-enable it. It's probably a good idea to give notice to your users that data is still being sent to the form, so that they aren't confused by a disabled submit button.

To make sure that all of your queries are through, you could use the jQuery .done() method.

If you need to do client-side validation, just attach an event to your submit button:

$('#submitbutton').submit(function() {
    // function code here
});