Comments on: Prevent double submit with jQuery

By: Garland Pope

Garland Pope — Sat, 30 Jan 2010 21:49:03 +0000

Henrik said he preferred another solution without saying why. I checked it out, and I see its advantages. While webguy’s solution elegantly prevents a submit _button_ from being double clicked, it does not handle all ways a form can be submitted, most importantly by pressing the enter key. Henrik’s solution works directly on the form rather than the specific means of submitting it. That takes care of submit buttons, images, enter keys, scripts, or any other method of submitting the form. Thanks for the help, both of you.

By: Garland Pope

Garland Pope — Sat, 30 Jan 2010 21:38:12 +0000

Randy, your problem is probably that $(this) is a reference to the object calling the function. In the original, that is the form. But in your ajax success function, it most likely refers to something else. So it’s trying to “find” image and submit inputs inside whatever $(this) refers to and not finding them. If you replace $(this) in your ajax success callback with a selector that points to your form (probably just using its ID), it might fix the problem.

By: Randy Johnson

Randy Johnson — Sun, 10 Jan 2010 19:07:02 +0000

Hello,

This solution:

$(’form’).submit(function(){

$(this).find(”input[type='image'],input[type='submit']“).click(function(){

return false;

});

does a good job, but how do you enable the submit button again after a return from an ajax call? I thought do this in the sucess function would fix it but it doesn’t

$(this).find(“input[type='image'],input[type='submit']“).click(function(){

return true;

});

By: Breno Mansur

Breno Mansur — Wed, 22 Jul 2009 11:12:48 +0000

Very good and simple solution!

Additionally, the developer can use an alert (or something) to inform the user that the request is being processed.

By: BrianLang.ca » Blog Archive » links for 2009-03-27

BrianLang.ca » Blog Archive » links for 2009-03-27 — Fri, 27 Mar 2009 07:01:38 +0000

[...] Prevent double submit with jQuery – GreatWebGuy (tags: jquery forms) [...]

By: Henrik N

Henrik N — Fri, 28 Nov 2008 08:45:54 +0000

I prefer this: http://henrik.nyh.se/2008/07/jquery-double-submission

By: webguy

webguy — Thu, 09 Oct 2008 12:39:39 +0000

If you take the combination of the two approaches an even more elegant solution is possible

$(’form’).submit(function(){

$(this).find(”input[type='image'],input[type='submit']“).click(function(){

return false;

});

By: links for 2008-09-18 « 思考と習作（ブックマーク）

links for 2008-09-18 « 思考と習作（ブックマーク） — Thu, 18 Sep 2008 17:31:07 +0000

[...] Prevent double submit with jQuery – GreatWebGuy jqueryでフォームからの二重投稿を防ぐ方法 (tags: jquery form 二重投稿防ぐ) [...]

By: webguy

webguy — Sat, 28 Sep 2002 21:38:53 +0000

Tony,

Thanks improvements are always welcome. I have run into a slight problem with the approach of disabling buttons during the submit, in some cases developers are using the name of the button clicked to control the routing of the next action, when you disable the buttons, the name is not passed. This is easily remedied by attaching to the click event:

$(“form”).each(function(){
var $that = $(this);
$that.submit(function(){
$that.find(“input[type='image'],input[type='submit']“).click(function(){
return false;
});
});
});

By: tony petruzzi

tony petruzzi — Sat, 28 Sep 2002 20:43:17 +0000

this will not only work for submit buttons but for also image buttons. comments welcomed.

$(“form”).each(function(){
var $that = $(this);
$that.submit(function(){
$that.find(“input[type='image'],input[type='submit']“).attr(“disabled”, “true”);
});
});