Preventing Multiple Form Submits

Stop your visitors from accidentally sending you multiple copies of the same form with this handy tutorial.

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 tutorial 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!).

Your Name:

Your Email Address:

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:

Your Name:

Your Email Address:

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.

Follow Elated

Related articles

Responses to this article

4 responses (oldest first):

26-Nov-10 21:01
Hi ,
i want to know can i pass vaiable from javascript to html .say i hv a prompt box of javascript and i want to enter my name and it should show in html twxt box or any variable which is in javascript can i send it to html text box.

secondly
how document.formname.submit() ; works
if any thing inside the html text under formname and after using above statement will the content of tect box will go to server side .


thanks a lot to help .
29-Nov-10 01:29
@kaushik: To store a value from prompt() in a form field then you can write something like this:


var response = prompt( "Please enter a value", "" );
document.getElementById('textBoxID').value = response;


I didn't understand your second question - can you rephrase?
29-Nov-10 11:56
Dear Matt ,
thanks a lot ,but i didnt gor exact output ......coz i not didnt understand .here i tried the code
=============================
<html>
<head>
<script language="javascript">
var response = prompt( "Please enter a value", "" );
document.getElementById('textBoxID').value = response;
</script>
<head>
<body>
<input type=text id=`textBoxID` >
</body>
</html>
===================================
i guess we should give value attribute in textbox so tht it will dispaly the value fetched by document.get id ...i tried tht one also .pls give sight on this.

secondy wht i asked ......was like ...

<html>
<head>
<script language="javascript">
function add(a1,a2)
{
var a3= a1+a3;
//how to send value of a3 in textbox t3
}
</script>
<head>
<body>
<form onsubmit=add(t1,t2)>
<input type=text name=t1 >
<input type=text name=t2 >
<input type=text name=t3 >
<input type="buttom " value=ok>
</body>
</html>
=======================================
lastly i hv one one problem ,i hv a drop down box with 3 elements from a table fieild .i want when i click a element of drop down box a message " field name where " with a blank text box .means message and text box should display on choose of a element.
<html>
<head>
<script language="javascript">

function pick(value)
{
if value.selected="item-name"
{
\\--------------\\
}
}

</script>
</head>
<body>
<form name="f1">

<SELECT NAME="s1" onChange="document.form.index.value=document.form.index.options[document.form.index.selectedIndex].value
<OPTION VALUE="Item-Name">Item-Name</OPTION>
<OPTION VALUE="Item-num">Item-num</OPTION>
<OPTION VALUE="cat-description">cat-description</OPTION>
</SELECT>
</form>

thanks a lot .
Kaushik
01-Dec-10 21:08
Please post the URL of your form.

Post a response

Want to add a comment, or ask a question about this article? Post a response.

To post responses you need to be a member. Not a member yet? Signing up is free, easy and only takes a minute. Sign up now.

Top of Page