When submitting a HTML form it can take several seconds before the
form is successfully submitted and the response page shown. People
can get inpatient and click the Submit button several times which
can result in duplicate form submissions. Usually it's not really a problem,
but in some cases you might want to prevent this from happening.
Below you will find two simple tricks for preventing duplicate submissions,
you can use either of these or a combination of both.
» prevent multiple form submissions using Javascript
Using Javascript to block duplicate submissions is probably the easiest
way. When someone submits the form we simply disable the Submit button
and maybe change it's value to something more descriptive, like
"Submitting, please wait..."
Try clicking this button for example. It will remain disabled until
you reload this page:
The first step is to give your submit button a unique id, for example
id="myButton":
The second (and last) step is to give two Javascript commands to the <form>
tag. The first one will tell the browser to disable the submit button
after the form has been submitted and
the second one will change the button text to give the user some idea
about what's happening. This is the code to add to your form tag:
That's it. This trick should work in most modern browsers (IE 5+, FireFox, Opera, ...).
» prevent multiple form submissions using cookies
If you wish to avoid duplicate submissions for the entire browser session
(or longer) you can consider using cookies. For example edit your
form processing script to send a cookie
to the browser after the form has been processed but before any
HTML or redirection headers are printed. Placing this code after the
mail() command should work in most cases:
setcookie('FormSubmitted', '1');
Then check for the cookie before processing. If it's there
this visitor already submitted the form in active browser session. Add this
code to the beginning of your form processing script:
if (isset($_COOKIE['FormSubmitted']))
{
die('You may only submit this form once per session!');
}
That's it!
Here's how the final script from our php form tutorial
would look like if modified to block duplicate submissions with cookies. Note
some code was added at the top of the script and the cookie printing code
after call to the mail() function:
<?php
/* Prevent duplicate submissions */
if (isset($_COOKIE['FormSubmitted']))
{
show_error('You may only submit this form once per session!');
}
/* Set e-mail recipient */
$myemail = "you@domain.com";
/* Check all form inputs using check_input function */
$yourname = check_input($_POST['yourname'], "Enter your name");
$subject = check_input($_POST['subject'], "Write a subject");
$email = check_input($_POST['email']);
$website = check_input($_POST['website']);
$likeit = check_input($_POST['likeit']);
$how_find = check_input($_POST['how']);
$comments = check_input($_POST['comments'], "Write your comments");
/* If e-mail is not valid show error message */
if (!preg_match("/([\w\-]+\@[\w\-]+\.[\w\-]+)/", $email))
{
show_error("E-mail address not valid");
}
/* If URL is not valid set $website to empty */
if (!preg_match("/^(https?:\/\/+[\w\-]+\.[\w\-]+)/i", $website))
{
$website = '';
}
/* Let's prepare the message for the e-mail */
$message = "Hello!
Your contact form has been submitted by:
Name: $yourname
E-mail: $email
URL: $website
Like the website? $likeit
How did he/she find it? $how_find
Comments:
$comments
End of message
";
/* Send the message using mail() function */
mail($myemail, $subject, $message);
/* Set a cookie to prevent duplicate submissions */
setcookie('FormSubmitted', '1');
/* Redirect visitor to the thank you page */
header('Location: thanks.htm');
exit();
/* Functions we used */
function check_input($data, $problem='')
{
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
if ($problem && strlen($data) == 0)
{
show_error($problem);
}
return $data;
}
function show_error($myError)
{
?>
<html>
<body>
<b>Please correct the following error:</b><br />
<?php echo $myError; ?>
</body>
</html>
<?php
exit();
}
?>