Business Sites     

Web Applications      Web Site Hosting      Search Engine     
CompanyWeb.net: Web Hosting, Internet Programming, Search Engine Optimization

 

What about C-T-P-M?
Content Traffic PREsell Monetize.

Give searchers what they want by converting your knowledge into high-quality, in-demand CONTENT.

SiteSell.com


Low Cost Web Hosting
Use a CompanyWeb recommended web hosting company and save. Get outstanding hosting service for $5.00/month or less.

hosting.sohosoftware.com


For Serious Companies
1,000+ pages of up - to - the - minute research, test results, examples, case studies, and the newest and hottest strategies for marketing your business on the Internet!

marketingtips.com


Step by step procedure
More than 200 million people a day search on Google for products and services, and there are less than 100,000 advertisers. Make money by placing Google AdWords ads for your affiliate programs.

googlecash.com

 

 

CompanyWeb Articles

Book Reviews
Columns

Web-Source Topics...

Horse's Mouth
ProBizTips

CompanyWeb Search



Web Design Master Series Article

Web Design Master Series Article is syndicated from Web-Source.net.

Syndicated articles are written by independent authors and the contents represent the author's views. The content of the article does not necessarily represent the views of Company Web staff and management.


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:

  1. Product ordering where the deluxe version allows a choice of color. If the standard version is selected, the color choice field is disabled.
  2. 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.
  3. 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:

William Bontrager Programmer/Publisher, "WillMaster Possibilities" ezine mailto:possibilities@willmaster.com

Are you looking for top quality scripts? Visit Willmaster and check out his highly acclaimed Master Series scripts. Some free, some for a fee.

Content Provided By:

More Master Series Articles...

 


Frontpage, NT are Trademarks of Microsoft Corporation. CompanyWeb Site Copyright (c) 1998 - 2003, CompanyWeb.net Site Development Service Group.