Handling a double click issue

I've been doing a lot of form submission using Ajax now and being used to it than having a normal submission. What's been troubling me is that I always ran with a double submission issue when the user clicks twice the submit button to make sure hey hit it.

One way I handle it is by using a flag:

ajaxIsLoading = false; // initiate flag
function listItem() {
  // check if ajax is not loading anymore
  if(!ajaxIsLoading) {
    ajaxIsLoading = true;
    $.post( "/post")
      .done(function( data ) {
       // data successfully submitted
       // set flag to false since post is done
       ajaxLoading = false; 
    });
  }
}

One problem I know using this is when your internet connection stops in the middle of it and didn't make through setting the flag back to false.

What I want to ask:

• Is this a good way to handle this kind of circumstance?

• Is it worth to check your network in case it went down so I can set the flag back to false knowing there's a very little chance it will happen?

Not sure of what is the context for your issue, so I will examine the 2 distinct cases I can think to.

Anyway I'm surprised your code doesn't show any data passed along with the POST: this should probably added in both cases below.

1) You said that "the user clicks twice the submit button": may be it means that you have only one button and "a lot of form submission" are successively done through this unique button.

If this is the case, the usually expected advantage of asynchronously processing is of no value here, and the pretty simple solution is to proceed synchronously, like this:

function listItem() {
    $.post( {url: "/post", async: false} )
      .done(function( data ) {
       // data successfully submitted
    });
}

(this way, no further click will have effect, till process done; also note that we had to change the way we are using $.post(), passing it a plain object as argument)

2) At the opposite, since you have written a function rather than a simple piece of code, you may have a lot of buttons, each one submitting a different form through the same listItem() call.

In this case, IMO the simplest way is to pass the button id to your function, that will disable it before launching POST, then enable it when achieved, like this:

function listItem(btnId) {
    button = $('#' . btnId);
    button.attr( {disabled:'disabled'} );
    $.post( "/post" )
    .done(function( data ) {
        // data successfully submitted
    })
    .always(function() {
        button.removeAttr('disabled');
    });
}

(using .always() ensures the button will be enabled even if POST failed or connection breaks)

StackExchange Code Review Q#90216, answer score: 2