title: How do I prevent form submission until multiple ajax calls have finished? jquery
body: <p>Following on from a p<a href="https://stackoverflow.com/questions/2279997/">revious question</a> where I asked about disabling a submit button until all ajax calls have finished returning...</p>
  
  <p>It seems that people are still managing to submit the form even with the button disabled and a warning sign. I guess it could be from pressing 'enter' in a text input.</p>
  
  <p>How do I go about disabling the whole form, rather than just the submit button?</p>
  
  <p>The code so far is:</p>
  
  <pre><code>// if we're waiting for any ajax to complete we need to disable the submit
  $(document).ajaxStart(function() {
    $(".ajaxbutton").attr("disabled", "disabled");
    // if it's taken longer than 250ms display waiting message
    timer = setTimeout(function() {
      $('#processingAlert').html(' ...please wait one moment');
      $('#processingAlert').show();
    }, 250);
  })
  $(document).ajaxComplete(function() {
    $(".ajaxbutton").removeAttr("disabled");
      $('#processingAlert').hide();
      // cancel showing the message when the ajax call completes.
  clearTimeout(timer);
  });
  </code></pre>
  
  <p>One other thing that I should mention which could be causing a problem is that there are multiple ajax calls happening at the same time, EG one div receives hidden inputs and another div elsewhere on the page shows a price total for instance.</p>
  
  <p>Would the fact that some ajax calls are completing quickly negate the disabling effect of ajaxStart? EG ajax call1 and ajax call2 both fire the ajaxStart - call1 finishes really quickly, would it re-enable the form while we are waiting for call2 to complete?</p>
  
  <p>Is there a better way of doing this where we could simply test if ALL ajax calls have completed?</p>