Disabling/Enabling Form Fields
Bontrager Copyright © 2003
Suppose you wanted a form that allows only certain fields to be filled in
depending on what certain other form fields contain. This article shows you
For example, you might have a radio button where the form user indicates
whether s/he is male or female. If male is checked, certain fields may be
filled in, but not others. And if female, different fields may be filled
Other uses might be:
Product ordering where the deluxe
version allows a choice of color. If the standard version is selected, the
color choice field is disabled.
When a book is ordered that must
be shipped, the shipping address fields may be filled in. However, if only
the electronic version is purchased, those fields are disabled.
If a user is looking for a dog, only
dog breeds may be selected. If a cat, only cat breeds. If a hamster, well,
I don't know whether or not there is more than one breed of hamster, but
you get the idea.
uses male/female radio buttons as mentioned earlier, each radio button associated
with a specific textarea field. Only the associated textarea field may be
Two potential problems are addressed in the demo.
First potential problem: A user checks one radio button, types something
into the textarea field, then checks the other radio button and types something
there. Then both textarea fields would contain information.
In the demo, if the user subsequently checks a different radio button, the
previous textarea field is cleared and disabled. This ensures that only the
textarea field corresponding to the checked radio button contains information.
would not be restricted to only the applicable fields.
In the demo, both of the textarea fields and the submit button are initially
disabled. This is done with the
attribute in the form field tags.
Because the textarea fields are disabled, nothing can be typed into them
Similarly, because the submit button is initially disabled, the form cannot
Netscape 4.# can not disable form fields. If this is a concern, the submit
document.write('<input type="submit" value="Click Here">\
on the web page the form can't be submitted.
has three related features, each provided as examples that may be used in
your own web page forms.
First related feature: Each radio button has a corresponding text field
containing the number of characters typed into or deleted from its textarea
Second related feature: The information in each textarea field is limited
to 100 characters.
Third related feature: All required fields must contain information before
the submit button is enabled. The required fields in the demo form are a
field asking for the user's name and the radio buttons.
The submit button is enabled only if the name field contains information
and a radio button is checked. If the name field subsequently has all information
deleted, the submit button is disabled again.
When the demo form is submitted, it is processed with Master Form V3. A "thank
you" page is displayed with the information the user supplied on the form.
However, any form processing CGI program could be used; it is not the CGI
has a link to a plain demo page that can be saved to your hard drive, and
it also has a link to a ZIP file to download the same demo page.
Copyright © 2003 Bontrager Connection, LLC
About the Author: