Prevent double form submission in jQuery

Question

I have a form that users use to input information about a posting. When complete they click 'Save' to update. However, in some rare cases (10 in 15,000 records) the user has double clicked the save button and caused a double form submission duplicating items for the posting.

I tried using this to prevent it:

$('input[type=submit]').click(function(){ $('input[type=submit]').attr('disabled',true); //return true; });

But the problem with this, it works perfectly in Safari / Firefox etc, but does not work in Internet Explorer 8 (and probably not for 6 & 7)

When I press save in IE8, the button is disabled and that's it, no form submission at all.

(I tried it with and without return true;)

have you thought about changing from a click event to a submit event? — Logan Bailey
– Logan Bailey, Commented Feb 16, 2011 at 17:19

jAndy · Accepted Answer · 2011-02-16 17:15:12Z

I'm not sure so this is a complete guess, but it maybe up to your selector there. Try instead:

$('input:submit').click(function() { $(this).attr('disabled', true); });#

You may also try to intercept the submit event itself:

$('form').bind('submit', function(e) { $(this).find('input:submit').attr('disabled', 'disabled'); });

It does the same thing, greys out the submit button and doesn't submit the form in IE8.
jAndy updated it which handles the submit event (does jQuery not call it onsubmit? Seems odd). Handling the onsubmit on the form will do what you want.

Kris · Accepted Answer · 2011-02-16 17:20:34Z

You need to handle the onsubmit event of the form rather than the click event of the submit button.

Adeel · Accepted Answer · 2011-02-16 17:20:40Z

User can press enter to submit form too, so instead of binding button click event , use the form submit. Also instead of disabling, hide the submit button by replacing it with some loading image.

jQuery("form").submit(function () { jQuery(":submit", this).css("display", "none"); jQuery(":submit", this).after("<span><img src='loading.gif' /></span>"); });

I like the thinking, but I might need the button afterwards if the validation fails on submit.

peakit · Accepted Answer · 2011-02-16 17:32:57Z

Chirs, this is a very common problem that every web developer faces. And guess what, it has a very well accepted solution.

The solution is known as PRG (Post -> Redirect -> Get). Read more about this on http://en.wikipedia.org/wiki/Post/Redirect/Get

Basically you need to leave the page in an HTTP GET mode so that even if user refreshes the page, no data should get re-submitted. So, you submit the form, redirect the page to a URL which displays the recently submitted data by doing a GET request.

EDIT As per the comment below seems like Chris is already following the above paradigm. Great. But he is still seeing duplicate form submissions. I would suggest on the first submission, replace the button with a loading image (as the first thing) so that the user does not see any button to re-click :)

$(document).ready(function() { // function which handles form submission $(#submitButton).replaceWith("<img src="./images/myLoader.gif>"); // do the actual form submission after this ... });

It is actually done in a Post Redirect Get mode, the problem is if you click the save button twice the browser will send the post twice and then as the first one finishes and gets to the redirect point, then it redirects, but the second one has already started running and likely made duplicated rows
The article says this pattern does not solve duplicate submissions caused by the user clicking the submit button multiple times.
Heh, this doesn't really answer THIS question, but it DID help me with an unrelated issue. Thanks!

Collectives™ on Stack Overflow

Prevent double form submission in jQuery

4 Answers 4

2 Comments

Comments

1 Comment

3 Comments

Linked

Hot Network Questions