skip to content

JavaScript: Preventing Double Form Submission

If you've been in the webmaster world for a while then you'll know that your users operate according to Sod's Law - "If anything can go wrong, it will". This page addresses one of the less-common but still quite annoying problems - double-clickers.

Disabling the Submit Button

In this example, you can click the first button as many times as you want. In practice this canl cause a form to be submitted, or some other event triggered, more than once. The second button however will only allow a single click.

The trick is to use JavaScript to set the disabled property of the button to true. The disabled property was first introduced by Microsoft but has since been adopted as a standard by the W3C.

For a simple form, with no associated JavaScripts, you can use:

<form ... onsubmit="myButton.disabled = true; return true;"> ... <input type="submit" name="myButton" value="Submit"> </form>

So WHEN the form is submitted - either by clicking on the submit button or pressing Enter in a text input field- the button will be disabled to prevent double-clicking.

If you're already using a form validation script then the command can be added to the script as follows:

function checkForm(form) { // // check form input values // form.myButton.disabled = true; return true; }

It's important that the command is added at the end of the script as otherwise, if the validation fails, they will have no opportunity to re-submit the form.

More User-Friendly

Rather than simply disabling the button, we can also change the text so that people don't get confused. This example first disables the button and then changes the label from "Submit" to "Please wait...". The second button restores the initial state:

The code executed when the form is submitted includes the following:

function checkForm(form) { // // check form input values // form.myButton.disabled = true; form.myButton.value = "Please wait..."; return true; }

While the 'reset' button calls the following function:

function resetForm(form) { form.myButton.disabled = false; form.myButton.value = "Submit"; }

As always, you should make sure that your forms are secure and work properly in non-JavaScript browsers.

A triple-click solution

This might be a slightly more elegant solution. The Submit button in this case cycles through three separate states:

  1. the button is active and clickable and will submit the form;
  2. the button is clickable, but will generate an alert message; and
  3. the button is disabled.

In the default state, clicking on the Submit button will call our form validation script (see below) to make sure that all the fields have been populated. If that is not the case then there is an alert message and the script halts.

If/when the form is successfully validated, the button text is changed to "Submitting form..." and a JavaScript variable, submitting is set to true indicating that the form submission is in progress.

A second click on the Submit button before the form has finished submitting will generate an alert message, and also disable the button preventing subsequent clicks.

Triple-click example

Our form validation script in this case simply checks that a value has been entered in each of the two form fields. This function is called from an onsubmit event handler attached so it's called only after any HTML5 form validation requirements have been met.

To test, click the Submit button twice in quick succession. On the second click an alert window will be displayed, while the form continues submitting (from the first click) in the background.

<script type="text/javascript"> var submitting = false; function checkForm(form) { if(form.firstname.value == "") { alert("Please enter your first and last names"); form.firstname.focus(); return false; } if(form.lastname.value == "") { alert("Please enter your first and last names"); form.lastname.focus(); return false; } return true; } function resetForm(form) { form.myButton.disabled = false; form.myButton.value = "Submit"; submitting = false; } </script>

In the HTML for the form the onsubmit handler first checks to see whether the form is already in the process of submitting (second click). If so it displays an alert and disables the submit button to prevent further attempts to submit the form.

If the form is not already being submitted (first click) the handler runs the usual JavaScript validation and, if successful, allows the form to be submitted.

<form ... onsubmit=" if(submitting) { alert('The form is being submitted, please wait a moment...'); myButton.disabled = true; return false; } else if(checkForm2(this)) { myButton.value = 'Submitting form...'; submitting = true; return true; } else { return false; } "> ... <p>First Name: <input type="text" size="32" required name="firstname"></p> <p>Last Name: <input type="text" size="32" required name="lastname"></p> <p><input type="submit" name="myButton"> <input type="button" value="Reset Button" onclick=" resetForm(this.form); "></p> </form>

The Reset button and script are just copied from the previous example, with the one addition being that the submitting variable is also reset back to false.

References

< JavaScript


Like Tweet     Bitcoin

User Comments and Notes

Dave 23 February, 2008

I am trying to make this work with a page that has JS Code for validation. I placed this at the end of the script. It disabled the button, but the other validation does not work. I know I have missed a step.

I think you need to first read the JavaScript Form Validation article. You seem to have pasted the 'double submit' code outside of any function, so it's being called when the page loads instead of only during form validation.

izwan 14 June, 2012

thanks dude, the third one sure saved me

Erik 20 April, 2013

The disabled state hangs in FF if you use the backbutton. Try clicking button 2 in the first example, visit another page and navigate back via the backbutton. Button 2 is still disabled.

Jeremy 24 August, 2013

This is a good solution, HOWEVER, it doesn't really stand well in 2013. It isn't really compatible with HTML5's input "required" attribute. If an input has the required tag, and you press the submit buton, and the field is empty the browser will fire the "Please fill out this field" message, BUT, you also just disabled that submit button. So in effect, the form can no longer be submitted.

This below solution works,

For instance, here is the text input:
<input type="text" id="first_name" required />

Using the 3. A triple-click solution solution above, the submit buton needs an id assigned, in addition to the name:
<input type="submit" name="myButton" id="myButton" onclick="

And this jQuery script is need for EVERY input with the required tag:

document.getElementById('first_name').addEventListener('invalid', function() {
submitting = false;
document.getElementById('myButton').value='Submit';
}, false);

You're right. The solution is to remove the onclick event handler from the submit button and replace it with an onsubmit handler on the form, as we've done now.

Send Feedback

Use this form to send a message to The Art of Web:


used only for us to reply, and to display your gravatar.

CAPTCHA refresh

<- copy the digits from the image into this box

press Esc or click outside this box to close

Load Feedback Form

top