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.
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.
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>
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 .
@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?
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
Please post the URL of your form.