Disable Form Buttons

Justin Barlow Jul 23, 2008

General

This script will disable your submit button in order to prevent multiple form submissions. Easy to implement.

[The example below will submit to a special file that will cause it to delay processing for five seconds, in order to show how the script works.

Notes

Created by: Justin Barlow
Web Site: http://www.netlobo.com/
Posted: July 23, 2008

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: disableFormButtons.js

/* This script and many more are available free online at
The JavaScript Source!! http://www.javascriptsource.com
Created by: Justin Barlow | http://www.netlobo.com/ */

function disableSubmit(whichButton) {
  if (document.getElementById) {
    // this is the way the standards work
    document.getElementById(whichButton).disabled = true;
  } else if (document.all) {
    // this is the way old msie versions work
    document.all[whichButton].disabled = true;
  } else if (document.layers) {
    // this is the way nn4 works
    document.layers[whichButton].disabled = true;
  }
}

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="disableFormButtons.js"></script>

Body

Paste this code into the BODY section of your HTML document


<form method="post" action="yourProcessingScript" onsubmit="return disableSubmit('mFormSubmit')">
  <table>
    <tr>
      <td>Name:</td>
      <td><input type="text" name="name"></td>
    </tr>
    <tr>
      <td>Email:</td>
      <td><input type="text" name="email"></td>
    </tr>
    <tr>
      <td>Message:</td>
      <td><textarea name="message" rows="4" cols="30"></textarea></td>
    </tr>
    <tr>
      <td colspan="2" style="text-align: center">
      <input type="submit" name="submit" id="mFormSubmit" value="Send Message">
      </td>
    </tr>
  </table>
</form>

Leave a Response

(2 comments)

Your question is beyond the scope of these comments. You will need to post it over on [a href="http://www.webdeveloper.com/forum/forumdisplay.php?f=3"]the JavaScript forum[/a]. Thanks!

Lee Nov 6, 2008

Would love to have a disable form button action, but will need multiple on submit events as already have extensive js field validation on submit, so, how to implement this additional function, so that it runs if the field validations permit submitting the form?

Mike Gordon Aug 5, 2008

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details