How-To: Preventing Multiple Form Submits
Level: Intermediate. Published on 4 April 2005 in JavaScript
Stop your visitors from accidentally sending you multiple copies of the same form with this handy how-to.
Forms on websites are a handy way to get information from your visitors. However it's easy for a visitor to accidentally send more than one copy of a form by clicking on the form's "submit" button more than once. The end result can be that identical emails get sent to the Webmaster, or identical records get added to a database.
This handy little how-to shows how you can use JavaScript in your Web pages to avoid forms being submitted more than once by a visitor.
Note
As not all browsers support JavaScript, this technique won't be able to prevent all multiple form submits. Therefore you shouldn't rely on this technique for anything really critical, such as e-commerce systems where two form submits would mean two card payments being made!)
How does it work?
The basic approach is to use a JavaScript variable to keep a record of whether the form has already been submitted. If it has then we prevent it from being submitted again.
The JavaScript
Here's the JavaScript that we're going to use. This should be placed in the <head></head> area of your Web page:
<script type="text/javascript">
<!--
var form_submitted = false;
function submit_form ( )
{
if ( form_submitted )
{
alert ( "Your form has already been submitted. Please wait..." );
return false;
}
else
{
form_submitted = true;
return true;
}
}
// -->
</script>
The script initially sets a variable, form_submitted, to false when the page first loads. Then, when the submit_form() function is called (see below), it sets form_submitted to true and submits the form by returning true. However, if the form has already been submitted once, form_submitted will already be true. In this case, the function displays a warning, and returns false to stop the form being submitted again.
The Form
Here's the HTML for a simple form to show our JavaScript in action:
<form onsubmit="return submit_form()">
<p>Your Name:<br />
<input type="text" name="visitor_name" /></p>
<p>Your Email Address:<br />
<input type="text" name="visitor_email" /></p>
<p><input type="submit" name="submit" value="Submit Form" /></p>
</form>
You'll notice the onsubmit="return submit_form()" attribute inside the <form> tag. This sets our submit_form() JavaScript function to handle the onSubmit event for the form. This is the event that is triggered when the visitor tries to submit the form. If our function returns true, the form will be submitted. If it returns false, the form will not be submitted.
See It In Action!
Try the script out for yourself! Fill out the form below then click on the Submit Form button below. One click should submit the form and display a response in a new window. Now click the Submit Form button again. Extra clicks should display a warning message and not re-submit the form. (If the form keeps getting submitted, you probably have JavaScript turned off in your browser.)
You can reset the form by reloading the page in your browser (click your Reload/Refresh button). This will allow you to submit the form again (once!).
Allowing Changes to the Form
There's one small problem with our script. It would be nice if we could let the visitor change one or more fields in the form and re-submit the form. This could be useful if, for example, they want to submit two different entries, or if there was a validation error that they need to correct. Currently, the only way to re-submit the form in this situation is to reload the page first, which isn't very intuitive.
By resetting the form_submitted variable back to false whenever a field is changed, we can allow the visitor to re-submit the form provided they have changed at least one of the fields since they last submitted. We can do this by adding an onChange attribute to each form field's tag - for example:
<p>Your Name:<br />
<input type="text" name="visitor_name"
onchange="form_submitted=false" /></p>
<p>Your Email Address:<br />
<input type="text" name="visitor_email"
onchange="form_submitted=false" /></p>
You can try this out with the form below. (You might need to reload this page first to reset the form_submitted variable.) Provided you change one or both of the form fields each time, you can re-submit the form as often as you like:
That's all there is to it! Feel free to take any of the above code snippets and use them in your Web forms to prevent those pesky multiple submits.
Share and enjoy
If you liked this article, you can share it with others by adding it to any of the following social bookmarking sites:
Link to this page
Feel free to link to this article in your own Web pages. Click one of the boxes below to select the text, then copy and paste it into your page:
Keep in touch
Subscribe to our feed or follow us on Twitter for news of our latest articles and other fun stuff.
Also, don't forget the free ELATED Extra Newsletter, where you can get more great Web-building articles and tips sent straight to your inbox!
If you need help with a Web-building issue, check out our online Help Forums, where you can get assistance from members of Elated and other webmasters.
If you would like to offer us feedback on this or any of our articles, please contact us. Have fun!
