Enabling and Disabling Form Fields

You may at some point in time find it necessary to disable a form field. The most common time to disable a form field is after the form has been submitted but before the user's view changes. Disabling the Submit button at this time will make it impossible for the user to submit the same information twice. Enabling and disabling forms is a simple feat to accomplish in Internet Explorer. Here is an example:

<html>
  <head>
    <title>
      JavaScript Professional Projects Form - Validation
    </title>

    <script language="JavaScript">
    <!--
       function disable( element )
       {
         element.disabled = true;
       }
     // -->
     </script>
   
  </head>

  <body>
    <center>
      <font size=6>JavaScript Professional Projects</font><br>
      <font size=4>Chapter 8: Form Validation</font>
    </center>

    <br><br>
    <br><br>

    <table cellspacing="4" cellpadding="4" width="65%">
      <tr>
        <td> 
          <form name="theForm"
                    onSubmit="JavaScript: disable( this.theButton );
                                          return( false );">
            <b><font size="5">Mailing Address</font></b><br>
            <br>
            <b>Last name, First name:</b><br>
            <input type="text" name="names" size="36"><br>

            <b>Street/Address:</b><br>
            <input type="text" name="address" size="36"><br>
            <b>City:</b><br>
            <input type="text" name="city" size="36"><br>
            
            <b>State:</b><br>
            <input type="text" name="state" size="36"><br>
         
            <b>Zip code:</b><br>
            <input type="text" name="zip" size="36">&nbsp;&nbsp;
            <input type="submit" value="Submit" name="theButton">
          </form>
        </td>
      </tr>
    </table>

  </body>
</html>

As you can see from the example, disabling a form element with Internet Explorer is as simple as setting its disabled property to true:

element.disabled = true;

This will cause the Submit button to no longer accept any events and, consequently, not allow the form to be submitted more than once. Unfortunately, the example submits the form long before you can actually see the disabled button, which is why return(false) is used in the form's onSubmit event handler to halt the submission. To enable a disabled form element, all you need to do is set the element's disabled property to false.

You can accomplish the same basic functionality in Netscape, as follows:

<html>
  <head>
    <title>
      JavaScript Professional Projects - Form Validation
    </title>

    <script language="JavaScript">
    <!--
       function disable( element )
       {
         element.disabled = true;
       }
     // -->
     </script>
  </head>

  <body>
    <center>
      <font size=6>JavaScript Professional Projects</font><br>
      <font size=4>Chapter 8: Form Validation</font>
    </center>
    <br><br>
    <br><br>
     <table cellspacing="4" cellpadding="4" width="65%">
       <tr>
         <td>
           <form name="theForm"
                     onSubmit="JavaScript: disable( this.theButton );
                                   return( !this.theButton.disabled );">
             <b><font size="5">Mailing Address</font></b><br>
             <br>
             <b>Last name, First name:</b><br>
             <input type="text" name="names" size="36"><br>
             
             <b>Street/Address:</b><br>
             <input type="text" name="address" size="36"><br>

             <b>City:</b><br>
             <input type="text" name="city" size="36"><br>
             <b>State:</b><br>
             <input type="text" name="state" size="36"><br>
             <b>Zip code:</b><br>
             <input type="text" name="zip" size="36">&nbsp;&nbsp;
             <input type="submit" value="Submit" name="theButton">
           </form>
         </td>
      </tr>
    </table>

  </body>
</html>

This example checks the disabled parameter of the button element and determines whether the form should submit:

return( !this.theButton.disabled );

Buttons are not the only form elements that take advantage of the disabled property. You can disable any visual field that is part of a form, including all input and select fields.