Preventing duplicate form submissions with jQuery

October 07, 2010

Today I was emailed by a colleague asking how my team prevents duplicate form submissions (double clicking a button, pressing enter twice on text field, etc.) on the web.

I tried to come up with a robust and simple solution and I wrote the following jQuery snippet in an email response:

{% codeblock lang:javascript %} $(‘form’).submit(function() { $(this).submit(function() { return false; }); }); {% endcodeblock %}

It seems simple enough to work, and I tested it in Firefox, Chrome, and IE7/8 and it did seem to do the trick.

However, I haven’t fully tested it. I expect problems on pages that involve ajax requests and rely on multiple submissions without actually refreshing the form.

But for now, it seems to be working. Anyone have a better solution?