3
\$\begingroup\$

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:

  1. Is this a good way to handle this kind of circumstance?
  2. 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?
\$\endgroup\$

1 Answer 1

2
\$\begingroup\$

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)

\$\endgroup\$
2
  • \$\begingroup\$ Isn't async is applicable on $.ajax() and not on $.post()? Also I believe it's been deprecated on new versions. But +1 on .always(), I've been totally ignoring that before thinking I won't be needing that. Thanks. \$\endgroup\$ Commented May 11, 2015 at 22:01
  • \$\begingroup\$ @Robin: $post() accepts a plain object, as you may control looking at api.jquery.com/jQuery.post (2nd signature), and nothing says it could be deprecated. Anyway, thanks for the feedback. \$\endgroup\$
    – cFreed
    Commented May 11, 2015 at 22:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.