Preventing Double-Clicked Submit Buttons


Today I decided I needed to figure out a way to prevent people double-clicking Submit buttons.  Now, before you get all horrified, I already did have protection server-side.  But if the Submit button was double-clicked, the user would get a confusing "Duplicate transaction" message.  Guess who would have to explain that one?

Disabling the Submit button was trivial, but in the scenario that the user's computer was not able to contact the server and the user clicked the Back button, the Submit button stayed disabled.  The following Javascript solves both problems.  Simply add onsubmit='return submitOnce;' to your <form> tag.

This has worked successfully with Firefox, IE, and Opera.  Please comment if you test it with any other browsers.
var form_submitted = false;
function submitOnce() {
 if (navigator.appName == "Microsoft Internet Explorer" || navigator.appName == "Netscape" || navigator.appName == "Opera") {
  if (form_submitted == false) {
   form_submitted = true;
   window.onunload = function() { form_submitted = false; }
   return true;
   } else {
   return false;
   }
  } else {
  return true;
  }
 }

 

If you would like a reply to your comment, you must leave your email address! We receive dozens of questions every month from people who don't leave us with any way to contact them, so we have no choice but to ignore the question. We try to reply to as many questions as we can, if we know the email address of the person who asked the question. Thanks in advance for writing in :)

Allowed HTML: <b>, <i>, <em>, <strong>. All other < and > will be replaced with &lt; and &gt;.