Dynamic Drive DHTML scripts- Form Dependency Manager

New Revised CSS Library Forums Web Tools

Form Dependency Manager

Author: Twey | Help forum

Updated: 22/09/06. Added "EMPTY" keyword. Script no longer tramples over existing events on the form elements.

Description: This is a form dependency script for shuttling the display of fields within a complex form, where the visibility of a form field should depend on the value and/or state of another. It's not meant to replace server side scripting for dictating what fields get filled out by the user; after all, JavaScript can easily be manually disabled by the user.

An overview of this script:

All dependency logic is defined via the class attribute inside the form fields in question, for easy implementation.
Create dependency based on the value (ie: text fields) or state (ie: radio boxes) of another field. Use "OR" or "AND" to create more complex dependencies.
Degrades well with browsers that have JavaScript disabled.

Demo: Make your selections:

Directions:

Step 1: Add the below code to the <HEAD> section of your page:

The above code references an external .js file, which you need to download: FormManager.js (right click, and select "Save As").

Step 2: Then, add the below sample form to your page:

Select All
<form action="" name="weboptions"> <p> <label>Linux<input type="radio" name="os" value="linux"></label> <label>Windows<input type="radio" name="os" value="windows"></label> <label>Password:<input type="password" name="pass"></label> <label style="margin-bottom: 1em; padding-bottom: 1em; border-bottom: 3px silver groove;"><input type="hidden" class="DEPENDS ON os BEING linux OR os BEING windows"></label> <label>SSH<input type="checkbox" name="ssh" class="DEPENDS ON os BEING linux"></label> <label>IIS<input type="checkbox" name="iis" class="CONFLICTS WITH apache AND DEPENDS ON os BEING windows"></label> <label>ASP<input type="checkbox" name="asp" class="DEPENDS ON os BEING windows AND DEPENDS ON iis"></label> <label>Insecurity<input type="checkbox" name="insecurity" class="DEPENDS ON os BEING windows AND DEPENDS ON iis"></label> <label>Frequent Crashes<input type="checkbox" name="crashes" class="CONFLICTS WITH apache AND DEPENDS ON os BEING windows"></label> <label>Apache<input type="checkbox" name="apache" class="DEPENDS ON os BEING linux OR os BEING windows AND CONFLICTS WITH iis"></label> <label style="margin-bottom: 1em; padding-bottom: 1em; border-bottom: 3px silver groove;"><input type="hidden" class="CONFLICTS WITH pass BEING EMPTY"></label> <label>Super secret hidden stuff!<input type="hidden" class="DEPENDS ON pass BEING password"></label> </p> </form>

This is an example web hosting signup form. It offers options of Windows or Linux hosting. If Windows, the client can choose Apache or IIS, and optional frequent crashes. If the client decides that s/he wants IIS, s/he has the option of ASP, and insecurity. The alternative is Apache, which is also available on Linux, as is SSH access. Obviously, the client cannot choose two webserver packages. It also gives an example of how to hide text using a label and hidden form element, and how to depend on a variable-value element.

More info

The script uses a simple syntax to implement dependency amongst form fields, by utilising the class attribute. There are two basic types of statements:

DEPENDS ON name [BEING value] [OR name [BEING value]]

CONFLICTS WITH name [BEING value]

Multiple statements can be separated with the "AND" keyword. "AND" can also be used to mark the boundary between these statements and true CSS classes, so the script doesn't interfere with your stylesheets. There is also a special keyword for use after BEING: EMPTY. Study the sample HTML code of Step 2 to see how it works, or post any questions in this forum thread.