16Sep/0828
Prevent double submit with jQuery
Another great "little" solution with jQuery. Needed a simple way to protect all the forms on our site from being double submitted. There was an attempted solution in place on our app, that added an onsubmit to every form with a function above it called ignoreDoubleSubmit that tried to trap the event of the button was clicked and not allow it to be clicked again. The problem was the event for the button wasn't present when the form was submitted so it would silently error out with a blink in the Firebug console. After weeks of fighting to have it fixed, I removed the code and reimplemented a working solution with jQuery
$('form').submit(function(){
$(':submit', this).click(function() {
return false;
});
});
September 28th, 2002 - 15:43
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”);
});
});
September 28th, 2002 - 16:38
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;
});
});
});
October 9th, 2008 - 07:39
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;
});
});
November 28th, 2008 - 03:45
I prefer this: http://henrik.nyh.se/2008/07/jquery-double-submission
July 23rd, 2012 - 02:56
it’s nice and simple solution
July 22nd, 2009 - 06:12
Very good and simple solution!
Additionally, the developer can use an alert (or something) to inform the user that the request is being processed.
January 10th, 2010 - 14:07
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;
});
January 30th, 2010 - 16:38
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.
January 30th, 2010 - 16:49
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.
April 15th, 2010 - 10:19
What about hitting enter twice?
June 27th, 2010 - 16:14
Why not just limit to one submit? This solves hitting enter twice as Skylar said.
var i = 0;
$(“form”).submit(function()
{
i++;
if ( i > 1 ) { return false; }
});
August 20th, 2010 - 13:02
@henrik.. good one
November 5th, 2010 - 21:42
I like Henrik’s approach to address it on form submit. For those who need to enable submit based on client side validation state using asp.net client side validation, the following enhancement might be helpful to you:
jQuery.fn.preventDoubleSubmit = function() {
jQuery(this).submit(function() {
if (this.beenSubmitted)
{
return false;
}
else
{
if(Page_IsValid)
{
this.beenSubmitted = true;
}
else
{
this.beenSubmitted = false;
}
}
});
};
jQuery(‘#form1′).preventDoubleSubmit();
December 9th, 2010 - 19:26
If you need to prevent double clicks on ajax forms i recommend this plugin for adding a delay and cancelling out subsequent clicks:
https://github.com/dougle/jQuery-Ajax-Singleton
January 28th, 2011 - 11:32
The solutions by Luke Burns is pretty cool and effective.
May 25th, 2011 - 11:51
I applied to be questioning if you may enjoy to be a customer poster on my site? and in trade you may embody a hyperlink your post? Satisfy reply when you get an possibility and I could send you my get in touch with particulars – thank you. Anyway, in my language, there aren’t much great obtain prefer this.
June 21st, 2011 - 03:44
Thanks a lot…
July 20th, 2011 - 17:54
Why not preventDefault() instead of return false ?
August 5th, 2011 - 12:33
great find, thank you for posting
August 26th, 2011 - 08:28
@ Henrik Nyh
I prefer your solution as well. I generalized it to any form:
$(document).ready(function(){
$(‘form’).submit(function(){
if (this.beenSubmitted)
return false;
else
this.beenSubmitted = true;
});
});
September 8th, 2011 - 07:52
I just wanted to post this for ASP.NET link buttons. I couldn’t get the above solutions to work with link buttons, but this works pretty well as an alternative. It disables all buttons with transactionLinkButtonJQ class applied.
I have this in my master page:
String.prototype.replaceAll = function (stringToFind, stringToReplace) {
var temp = this;
var index = temp.indexOf(stringToFind);
while (index != -1) {
temp = temp.replace(stringToFind, stringToReplace);
index = temp.indexOf(stringToFind);
}
return temp.toString();
};
$(“.transactionLinkButtonJQ”).bind(“click”, function() {
//alert(this.id);
$(“.transactionLinkButtonJQ”).each(function () {
$(this).attr(“disabled”, “disabled;”);
});
__doPostBack(this.id.replaceAll(‘_’, ‘$’), ”)
});
}
any link button you want disabled on a page after a click you have to add the class transactionLinkButtonJQ (see below)
September 8th, 2011 - 07:55
for some reason my example didn’t fully post. here is the class getting applied to a link button
November 19th, 2011 - 06:22
Thanks Rinze..
$(document).ready(function(){
$(‘form’).submit(function(){
if (this.beenSubmitted)
return false;
else
this.beenSubmitted = true;
});
});
May 10th, 2012 - 05:51
Out from Luke Burns post…
var i = 0;
$(document).ready(function(){
$(“#formID”).submit(function(){
i++;
if ( i > 1 ) { return false; }
});
});
Tested in IE9, firefox, Chrome and works with Ajax/jquery inline form validation..
So really happy about finding this article
May 24th, 2012 - 21:18
I was using a junction like this….
$(“form”).submit( function () {
$(this).unbind();
$(this).click(function () {
return false;
});
});
And that does no work in ie9 so i changed it to this and now it works in ie9, it seems that the form would not submit unless I submit it with jquery in the submit call back, also works in chrome.
$(“form”).submit( function () {
$(this).unbind();
$(this).submit();
$(this).click(function () {
return false;
});
});
May 27th, 2012 - 12:32
cool!!!
January 10th, 2013 - 04:22
This is a silver bullet solution yet very simple! Thanks Alot!
February 19th, 2013 - 09:36
Thanks! Very helpful.