Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
How to disappear and re-appear form elements
form elements
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:
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:
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:
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,
![[monkey]](/data/assets/smilies/monkey.gif "[monkey] [monkey]")
Edward
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:
Code:
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:
Code:
<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:
Code:
<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