Hi cclegg06-ga,
I have used the technique outlined below to detect and prevent
multiple form submissions.
Whenever the user clicks the submit button, the javascript function
submitForm() is called. This function returns true if form submission
is allowed and false if it is to be prevented. It tracks whether the
submit button has been pressed before or not, with the help of a
global variable named formSubmitted.
This variable initially has the value false. Whenever the user
submits the form, this variable is set to true. If the user clicks
submit again, the function detects that the user has already submitted
the form, since the formSubmitted variable is set to true, and so
returns false, preventing the form from being submitted.
Since the user is only allowed to press the submit button once, I
have included an extra layer of verification in the code. The
formSubmit() function first checks to see whether all the required
data in the form has been filled or not by calling the verifyForm()
function. If the form has not been completely filled, a message is
shown to the user, and the click is not counted. If all the data has
been filled, then the verifyForm() function returns true, and the
formSubmit() function continues. Please note that in my sample code, I
have left this function empty. It always returns true. You should
modify the code to check your form for completeness. Or, you can
remove it entirely, if you so want.
You can get the javascript file and the example HTML page from the
following links:
[ External JS File ] http://www31.brinkster.com/tanm/GA/submit.js
[ Example HTML Page] http://www31.brinkster.com/tanm/GA/page.htm
For your convenience, I also include the source code below:
====================BEGIN HTML============================
<html>
<head>
<script type='text/javascript' language="javascript"
src=".\submit.js">
</script>
</head>
<body>
<center>
<FORM ACTION="http://www.someaddress.com/somefile" METHOD=POST>
<INPUT TYPE="text" NAME="text_field">
<BR>
<input type="Submit" value="Submit" onClick="return submitForm();">
</FORM>
</center>
</body>
</html>
===================== END HTML============================
==================== BEGIN Submit.js ============================
// Initialize our submit flag to false
var formSubmitted=false;
function submitForm()
{
//has the form been submitted before?
if( formSubmitted == true )
{
alert("This form has already been submitted!!!");
return false;
}
// Verify that all the data has been entered
if( verifyForm() == false )
{
alert ("Please complete the form before you submit it.");
return false; // Don't submit
}
// Set the formSubmitted flag
formSubmitted = true;
// Show message to the user
alert("The form has been submitted.\nThank you!");
return true; // Submit form
}
function verifyForm()
{
// Use this function to ensure that all the
// required data has been entered in the form
// return true if the form is complete
// return false if its not
return true;
}
====================== END Submit.js ============================
This is, of course, only one approach to the problem. You can check
out the following article for other approaches to this
problem:
- Multiple Form Submission Prevention by Will Bontrager
( http://lightfocus.com/ebook/m021203.htm )
Hope this helps.
If you need any clarifications, or modifications to the code, just
ask!
Regards,
Theta-ga
:-)
--------------------------------
Google Search Terms Used:
javascript prevent multiple form submissions |
,
0 Comments
)