PHP How To Prevent Multiple Form Submission On Submit With Javascript
preventing spammers from submitting multiple submittions on your website can be annoying. i will show you how i was able to stop spammers from submitting a bunch of useless comments on my website [780], Last Updated: Sat May 18, 2024
unix
Sat Nov 25, 2006
5 Comments
4708 Visits
There are times when you have to have a form on you web page, to obtain information from a user. There are times when a user or visitor hits the submit button twice or multiple times and then you end up with duplicate submissions. To prevent this from happening, you can use javascript to disable the submit button as soon as the user hits the Submit. This will prevent them from hitting the submit button again, thus only one form will be submitted.
This took me a while to figure out. At first I wanted to display a message like "loading page" as soon as the user hit the submit button. also i wanted an image to appear when the submit button was hit, but i couldn't figure out how to do that. So the best i could do was to show a message that said "Searching, Please wait" on the submit button while it is disabled.
So here is the code to put in your html:
first put this code in between the <head> tags:
Then you can put this form in your <body> tags
Thats it. if you want to see this script in action, i've made a sample script here. To see it in action, copy and past this code into notepad and save it as sample.html, then open it with your browser.
Or if you want, you can see a demo by [url=http://tuiz.com/javascript-tutorial-avoid-multiple-submit-disable-submit-button-upon-submission-p32.html]clicking here[/url]
This took me a while to figure out. At first I wanted to display a message like "loading page" as soon as the user hit the submit button. also i wanted an image to appear when the submit button was hit, but i couldn't figure out how to do that. So the best i could do was to show a message that said "Searching, Please wait" on the submit button while it is disabled.
So here is the code to put in your html:
first put this code in between the <head> tags:
CODE:
<script type="text/javascript">
<!--
function checkForm(form)
{
// Disable Sumbit Button upon Submission
// http://www.wallpaperama.com/forums
// Please leave our link here
form.SubmitButton.disabled = true;
form.SubmitButton.value = "Please wait...";
return true;
}
function resetForm(form)
{
form.SubmitButton.disabled = false;
form.SubmitButton.value = "Submit";
}
// -->
</script>
<!--
function checkForm(form)
{
// Disable Sumbit Button upon Submission
// http://www.wallpaperama.com/forums
// Please leave our link here
form.SubmitButton.disabled = true;
form.SubmitButton.value = "Please wait...";
return true;
}
function resetForm(form)
{
form.SubmitButton.disabled = false;
form.SubmitButton.value = "Submit";
}
// -->
</script>
Then you can put this form in your <body> tags
CODE:
<form method="POST" action="http://www.wallpaperama.com" onSubmit="return checkForm(this);">
<input type="submit" name="SubmitButton" value="Submit">
</form>
<input type="submit" name="SubmitButton" value="Submit">
</form>
Thats it. if you want to see this script in action, i've made a sample script here. To see it in action, copy and past this code into notepad and save it as sample.html, then open it with your browser.
CODE:
<script type="text/javascript">
<!--
function checkForm(form)
{
//
// check form input values
//
form.SubmitButton.disabled = true;
form.SubmitButton.value = "Please wait...";
return true;
}
function resetForm(form)
{
form.SubmitButton.disabled = false;
form.SubmitButton.value = "Submit";
}
// -->
</script>
<p>This short tutorial will show you how to avoid multiple submissions from users by disabling the submit button once the form has been submitted </p>
<form method="POST" action="http://www.wallpaperama.com" onSubmit="return checkForm(this);">
<p>Your Name:
<input type="text" name="textfield">
(put whatever you want) </p>
<p>Your Comments:
<textarea name="textarea"></textarea>
(put whatever you want)</p>
<p>Notice once you hit the Submit button, you will see the "Submit" change to "Please wait..." and you won't be able to submit the form again. </p>
<p>
<input type="submit" name="SubmitButton" value="Submit">
</p>
</form>
<p align="left"><a href="http://www.wallpaperama.com/forums"><< Go Back</a></p>
<p align="center">Example Tutorial by <a href="http://www.wallpaperama.com">wallpaperama.com</a> </p>
<!--
function checkForm(form)
{
//
// check form input values
//
form.SubmitButton.disabled = true;
form.SubmitButton.value = "Please wait...";
return true;
}
function resetForm(form)
{
form.SubmitButton.disabled = false;
form.SubmitButton.value = "Submit";
}
// -->
</script>
<p>This short tutorial will show you how to avoid multiple submissions from users by disabling the submit button once the form has been submitted </p>
<form method="POST" action="http://www.wallpaperama.com" onSubmit="return checkForm(this);">
<p>Your Name:
<input type="text" name="textfield">
(put whatever you want) </p>
<p>Your Comments:
<textarea name="textarea"></textarea>
(put whatever you want)</p>
<p>Notice once you hit the Submit button, you will see the "Submit" change to "Please wait..." and you won't be able to submit the form again. </p>
<p>
<input type="submit" name="SubmitButton" value="Submit">
</p>
</form>
<p align="left"><a href="http://www.wallpaperama.com/forums"><< Go Back</a></p>
<p align="center">Example Tutorial by <a href="http://www.wallpaperama.com">wallpaperama.com</a> </p>
Or if you want, you can see a demo by [url=http://tuiz.com/javascript-tutorial-avoid-multiple-submit-disable-submit-button-upon-submission-p32.html]clicking here[/url]
charl
Wed May 30, 2007
karthik
Sat Nov 14, 2009
hello friends i want validation for dob with username and password and all in single form using javascript...i have two function and i need single submit and work as two function...if you know send me..thanks
aa
Sun Sep 13, 2009
sssssssssssssssssssssssssssssssssss
https://www.wallpaperama.com/forums/php-how-to-prevent-multiple-form-submission-on-submit-with-javascript-t501.html
https://www.wallpaperama.com/forums/php-how-to-prevent-multiple-form-submission-on-submit-with-javascript-t501.html
wallpaperama
Wed Mar 11, 2009
there are many javascript DOMS that you can use to achieve this, but the most easy and popular way to get a html form to work with javascript has to be by using a function. functions are the most easy and fastest way to get the script to work to do what you want to do by eliminating and preventing alot of submit clicks at once. this way the user only clicks one on the submit button and so you dont have so many submits because i know like me, sometimes i double click on the submit button and then you get two entries. altho this is not entirely accurate wahy to prevent and stop people from sending forms twice or more, the best way to prevent is by using sessions. sessions are a great way for preventing multiple submissions on your form which causes a great deal of resources on your server website, so if you use a session and once the session has been stored in a database, you can keep track of it until the user has submitted the information, once the form has been received and accepted by your script, then you can destroy the session because you know that the user has done everything right. and you can take it a step further by making the timeout in your database for example my session id is: 4kdytgrekyt35y3jhd
i will insert this into my database and putting a timeout of 15 minutes, so after the user has submitted the form and has been accepted by the script, then it will be stored in a database instead of sending it to email. so if the user tries to enter another form with the same session id then it will fail because the timeout has not expired.
hope that helps
i will insert this into my database and putting a timeout of 15 minutes, so after the user has submitted the form and has been accepted by the script, then it will be stored in a database instead of sending it to email. so if the user tries to enter another form with the same session id then it will fail because the timeout has not expired.
hope that helps
tim
Tue Mar 13, 2007
this is a good how to disabled submit button in a web form using javascript hmlt php
if(isset($_REQUEST['enter']))
{
echo "<h1>submitted</h1>";
}
?>
<script type="text/javascript">
function checkForm(form)
{
// Disable Sumbit Button upon Submission
// http://www.wallpaperama.com/forums
// Please leave our link here
form.SubmitButton.disabled = true;
form.SubmitButton.value = "Searching, Please Wait.";
return true;
}
function resetForm(form)
{
form.SubmitButton.disabled = false;
form.SubmitButton.value = "Search";
}
</script>
<p>This short tutorial will show you how to avoid multiple submissions from users by disabling the submit button once the form has been submitted </p>
<form method="POST" action="" onSubmit="return checkForm(this);">
<p>Your Name:
<input type="text" name="textfield">
(put whatever you want) </p>
<p>Your Comments:
<textarea name="textarea"></textarea>
(put whatever you want)</p>
<p>Notice once you hit the Submit button, you will see the "Submit" change to "Please wait..." and you won't be able to submit the form again. </p>
<p>
<input type="hidden" name="enter" value="1">
<input type="submit" name="SubmitButton" value="Submit">
</p>
</form>
<p align="left"><a href="http://www.wallpaperama.com/forums"><< Go Back</a></p>
<p align="center">Example Tutorial by <a href="http://www.wallpaperama.com">wallpaperama.com</a> </p>