 Master
Series
Disabling/Enabling Form Fields
Dynamically
By
William
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
how.
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
in.
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.
The
demo
uses male/female radio buttons as mentioned earlier, each radio button associated
with a specific textarea field. Only the associated textarea field may be
typed in.
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.
Second potential problem: A user with a JavaScript-disabled browser uses
the form. Because the enabling/disabling is done with JavaScript, this user
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
disabled="true"
attribute in the form field tags.
Because the textarea fields are disabled, nothing can be typed into them
unless they are enabled with a browser that can run JavaScript.
Similarly, because the submit button is initially disabled, the form cannot
be submitted unless its enabled with a browser that can run JavaScript.
Netscape 4.# can not disable form fields. If this is a concern, the submit
button itself can be printed with JavaScript, like:
<script type="text/javascript" language="JavaScript"><!--
document.write('<input type="submit" value="Click Here">\
//--></script>
If the browser is not JavaScript-enabled, the submit button never prints
on the web page — the form can't be submitted.
The
demo
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
field.
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
program but the JavaScript that dynamically enables/disables form fields.
The
demo
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.
Will Bontrager
Copyright © 2003 Bontrager Connection, LLC
About the Author:
|
Traffic
