INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

form elements

How to disappear and re-appear form elements by EdwardMartinIII
Posted: 18 Mar 03 (Edited 4 Jun 03)

I have a form.  On that form is a drop-down control.  The drop-down control allows me to choose the type of data (for example, search [name | time zone | preferred calling time]).  Next to it I want another control.  That control allows me to choose units, in accordance with the previous control.  So, basically, if I choose "name" in the first, then I want the second control to be a string entry.  If I choose "time zone", then I want the second control to be a drop-down [Pacific | Mountain | Central | Eastern].  If I choose "preferred calling time", then I want that second control to be a disabled string control and two buttons, one labelled "Start time" and one labelled "end time".

Place your first drop-down in the HTML.  Follow it by each of the other ones, all in the same row.  Be sure to name each one individually.

This will look messy.  Don't be afraid.

Make a separate JS file with a function like this:


function PopulateMatchElement(Argument)
  {
    switch(Argument)
      {
        case 0:
          document.SearchForm.MatchString.style.display="inline";
          document.SearchForm.MatchTimeZone.style.display="none";
          document.SearchForm.MatchTimeRange.style.display="none";
          document.SearchForm.MatchDateRange.style.display="none";
        break;
        case 1:
          document.SearchForm.MatchString.style.display="none";
          document.SearchForm.MatchTimeZone.style.display="inline";
          document.SearchForm.MatchTimeRange.style.display="none";
          document.SearchForm.MatchDateRange.style.display="none";
        break;
        case 4:
          document.SearchForm.MatchString.style.display="none";
          document.SearchForm.MatchTimeZone.style.display="none";
          document.SearchForm.MatchTimeRange.style.display="none";
          document.SearchForm.MatchDateRange.style.display="inline";
        break;
        case 6:
          document.SearchForm.MatchString.style.display="none";
          document.SearchForm.MatchTimeZone.style.display="none";
          document.SearchForm.MatchTimeRange.style.display="inline";
          document.SearchForm.MatchDateRange.style.display="none";
        break;
      }
  }


Of course, be sure to use your values for the form name and control name...

What this will do is, according to the value of the Argument (I left out a bunch of arguments for clarity), it will make three of the four controls invisible and make the fourth one visible.  This isn't the same as disabling.

Now, in your HTML page, the first thing you change is to add an onload command:


<body onload="PopulateMatchElement(SearchForm.SearchField.selectedIndex);return(false);">


This assures that when the page loads, things will be neatly organized according to defaults.

Then, on that first drop-down, you add the following onchange event, again, modifying form and control names to match your own circumstances:


<select name="SearchField" id="SearchField" onchange="PopulateMatchElement(SearchForm.SearchField.selectedIndex);return(false);">


The result is that when the page/form loads, the function checks the value of the drop-down and shows only the appropriate set of controls (obviously, you can modify the function to do this with any number of controls, but that is a power to destroy as well) for the selected type.  If you change the value, the function is called again, and controls are hidden or revealed accordingly.

Sad to say, this only works in IE, but if anyone knows how to make it work in Mozilla/Netscape, I'd be happy to update this FAQ.

Hope that was helpful!

Cheers,

Edward

Back to Javascript FAQ Index
Back to Javascript Forum

My Archive

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close