Cross-browser double form submit prevention

Question

We developed a potential solution for the double form submit prevention and we need some review on it. To be able to execute this code on asp.net we needed to add our function call directly into the onsubmit event of the form. This cannot be handled by jQuery because asp.net use a dopostback function and called form.submit(). If onsubmit attribute of the form is empty then it will not execute the code. We don't want to depend on a bloq-UI or disabled button actions.

This is our form tag

 <form id="form1" runat="server" onsubmit="return preventDoubleSubmit(event);">

And this is our javascript that handles the double submit prevention:

//Double submit preventions
var _preventDoubleSubmit = false;
function preventDoubleSubmit(e) {
 if (_preventDoubleSubmit) {
 return cancelDoubleSubmit(e);
 }
 else {
 _preventDoubleSubmit = true;
 return true;
 }
}
function cancelDoubleSubmit(e) {
 if (!e) {
 e = window.event;
 }
 if (e.returnValue != undefined) {
 e.returnValue = false;
 }
 if (e.cancelBubble != undefined) {
 e.cancelBubble = true;
 }
 if (e.stopPropagation) {
 e.stopPropagation();
 }
 if (e.stopImmediatePropagation) {
 e.stopImmediatePropagation();
 }
 if (e.preventDefault) {
 e.preventDefault();
 }
 return false;
}
//END - Double submit prevention

Any review on this would be appreciated.

• laurent: Couldn't you just disable the Submit button after the user clicks on it?
• sebascomeau: It is more complicated with Asp.net controls that does a autopostback like a checkbox, dropdownlist, imagebutton, linkbutton, etc... You need to consider each type of controls that can submit the form.

Answer 1

Can't you just overwrite the onsubmit handler with the first submission?

function preventDoubleSubmit(e) {
 e = e || window.event;
 var form = e.target || e.srcElement;
 form.onsubmit = function() {
 return false;
 };
}