jump to navigation

Hiding HTML Form Elements with JavaScript December 08 2006

We recently had a requirement to update a form to reveal / hide various form elements based on a dropdown list selection.  Since the site was done in CodeCharge, using server-side .NET visibility was going to prove to be a real pain in the ass down the road when we made additional changes.  CodeCharge does “Auto Generated” code so any custom code you change you won’t be able to add other elements in the future without your original custom code being corrupted.

 

There are a few basic things you need to do:

  1. Seperate your form into different tables and surround the tables that you want to HIDE or REVEAL with DIV tags
  2. Create the dropdown list and assign its “onchange()” method to a custom JavaScript function
  3. Create the JavaScript that will HIDE or REVEAL the DIVs based on the selected value of the DropDown list.
  4. Customize the CSS so that the tables all look seamless and you won’t notice that there are actually multiple tables (in my case 4)

Here is my example :  Hiding Form Elements with JavaScript

Comments»

no comments yet - be the first?