Prevent double form submission

Question

I am trying to adapt a bunch of existing web apps to prevent users from accidentally bouncing on the submit button and submitting the form twice. I thought jquery would be the best way to do this, although my pages use very little jquery otherwise.

I've found many similar questions here, and the answers have been very useful but still do not offer a complete and simple solution. The first solution I hit upon was this:

$(document).ready(function(){
    $('form').submit(function(){
         $("input[type=submit]").prop("disabled", true);
    });
});

It works very well, greying out the submit button(s) after the form is submitted. The problem is that the value of the submit button itself does not get submitted with the form, I guess because it is disabled. Usually that is not a problem, but for some of the applications it is because they depend on the value of the submit button for correct operation. I would like something more general that will work for those pages without having to redesign them.

I then tried this other example:

$(document).ready(function(){
  $('form').submit(function(){
    $(this).submit(function() {
      return false;
    });
    return true;
  });
});

This works well for disabling multiple submissions while still transmitting the value of the submit button, but it does not grey out the submit button, so there is no visual indication that the submission has occured. I will probably go with if I cannot find a better solution, but I would like both to transmit the value for the button, and to grey out the button.

I finally tried this:

$(document).ready(function(){
  $('form').submit(function(){
    this.submit();
    $("input[type=submit]").prop("disabled", true);
    return false;
  });
});

However, it seems to be like the first example in that the submit button value is not transmitted with the form, despite that the this.submit() apparently should be happening before the disabling.

I've also tried just hiding the button, but that causes the page to get re-arranged, and the poor user will accidentally hit something completely different on the mouse bounce, rather than hitting the submit twice.

I could replace the button with something of the same size, or try to copy the submit value into a hidden input element with the name, but that is getting grotesque. Is there a simple way to meet this simple need?

Solution 1

Instead of binding the submit event of FORM, try using the click handler of submit button and used:

$('form :submit').click( function () {
    $(this).prop("disabled", true).closest('form').append($('<input/>', {
        type: 'hidden',
        name: this.name,
        value: this.value
    })).submit();
});

Solution 2

How about this?

$('form').submit(function(e){
     e.preventDefault();
     this.submit();
     $("input[type=submit]").prop("disabled", true);
});

Comments

[Hogan]

The only way I was able to do this with .net (which caused the same issues because the submit of the page included some slow async code) was to cover over the button with an image that showed a disabled button. You should be able to find examples of this under .net tagged questions.

[A. Wolff]

It should be this.submit(); and anyway, i don't think it will fix OP issue

[Hogan]

This is exactly the same as the first case.

[A. Wolff]

.prop() is preferred method as for jQuery 1.6+

[Hogan]

This won't matter... the problem is .submit() is async and does not finish before the next line is executed.

[xlordt]

I know, but stupid enough.. I have had .attr work and not .prop

[jjanes]

This looks like the winner. I guess making a new hidden element was not as grotesque as I thought. The only problem with it is that on firefox the button remains disabled if the person uses the back button to get back to the form again. But the original 3 methods I tried all have that problem also.

[jjanes]

Except, this does not work if there is a form action actually named 'submit', which the legacy code does have some of. So between these two features, it looks like there is no transparent way to do this.

[A. Wolff]

@jjanes What do you mean with "form action actually named 'submit'"? Submit handler?

[jjanes]

@A-Wolff I have some legacy forms that named their submit button "submit", i.e. <input type="submit" name="submit" value="do that thing">. I think I'll just bite the bullet and modify them.

[A. Wolff]

@jjanes ya because using as attribute name 'submit' for an input inside of a FORM overwrite native DOM method submit() of this FORM.