The Netlobo logo - a Nevada desert landscape

Disable Form Buttons and Other Elements with Javascript

A tutorial on how to disable form buttons and other HTML elements using javascript

Published Jul 8, 2005 by lobo235
Last updated on Apr 24, 2007

If you have a form that takes a long time to submit you may be interested in this easy javascript trick. Here's how it works. The visitor fills out the form on your webpage and hits the submit button. When they click the submit button it then becomes disabled to prevent multiple submits. This will not only keep your visitor from waiting longer than they have to, but it will prevent extra entries being created in your database, or stop extra emails from being sent to you.

As an example, on your own website you might have a form similar to the one below. In theory, you would setup a form like this to send you an email with the information that the visitor submits. If the mail server is overburdened or if your web server is responding to a lot of requests at the moment, this form could take a while to submit. If you disable the submit button using javascript, you will probably keep the visitor from trying to submit the form again because to them, it doesn't seem to be responding. This means that instead of getting duplicate emails sent to you, you'll most likely just get one. Check out the example form below:

Name:
Email:
Message:

The form is created using the following HTML:

<form method="post" action="submitpause.php" onsubmit="javascript: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>

You also need to place the following javascript function in the <head> section of your html or in an external .js file:

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;
    }
}

Notice the onsubmit element of the form tag. This is the place where the javascript function that actually disables the submit button is called. Even though the button is disabled when the user clicks it, the form still submits just fine. Try it and you'll see. I setup a PHP page that the form submits to that pauses for 7 seconds to give the effect of a busy web server. This javascript should be cross-browser compatible. I know it works in IE and FireFox for sure. Let me know how it works with your browser of choice.

There are of course those people out there who disable javascript in their browsers for whatever reason. This javascript will not prevent those visitors from submitting the form multiple times so you should also do something to prevent duplicate entries or emails on the server side too. As a rule of thumb, you should never rely on javascript because it can be disabled by the visitor. I always try to use both javascript and something on the server side (like PHP) to accomplish tasks like this and I recommend that you do the same.

1 comment for this article.

del.icio.us logo add this article to del.icio.us! Other great Web Development and Programming articles on Netlobo.com:
Using Javascript to get an Element by ID
How to test your PHP scripts
Checkbox Magic - Checking, Unchecking, and Inverting with Javascript