PHP How To Prevent Multiple Form Submission on Submit With Javascript

RegisterLogin

Webune Forums » Javascipt » PHP How To Prevent Multiple Form Submission on Submit With Javascript

PHP How To Prevent Multiple Form Submission on Submit With Javascript
Post Description: PHP How To Prevent Multiple Form Submission on Submit With Javascript
Tags: PHP, How, To, Prevent, Multiple, Form, Submission, on, Submit, With, Javascript
This Post Was Posted On Feb 29, 2008 By unix #1398

PHP How To Prevent Multiple Form Submission on Submit With Javascript by unix

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:

Code:

Then you can put this form in your <body> tags

Code:

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:

Or if you want, you can see a demo by clicking here

Leave Your Comments

Related Pages: [Add Your Website]

Post New Topic

bill

#4966 1

very helpful indeed, i want to learn more about this topic

Apr 06, 2011 Reply Report abuse

charl

#1822 2

i think this one works better with 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>

May 30, 2007 Reply Report abuse

tim

#1821 3

this is a good how to disabled submit button in a web form using javascript hmlt php

Mar 13, 2007 Reply Report abuse

Leave Your Comments...