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:
<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>


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>


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 &quot;Submit&quot; change to &quot;Please wait...&quot; 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">&lt;&lt; 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]