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; } }
