CODEWITHSUNDEEP
javascriptjqueryajax
Ben G
Ben G

Reputation: 26761

Preventing submit until ajaxes are done

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.

Upvotes: 5

Views: 3573

Answers (6)

Kevin Ji
Kevin Ji

Reputation: 10489

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
});

Upvotes: 0

Niklas
Niklas

Reputation: 30002

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 complete 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(...);
    }
}

Upvotes: 1

Z. Zlatev
Z. Zlatev

Reputation: 4820

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

Upvotes: 2

Kranu
Kranu

Reputation: 2567

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.

Upvotes: 7

8bitme
8bitme

Reputation: 947

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

Upvotes: 2

Chester Copperpot
Chester Copperpot

Reputation: 146

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

Upvotes: 0

Related Questions