Making Form Elements Appear and Disappear

[Hal Vaughan]

I have a case where the user can select several choices from my 1st <SELECT>
element. The user's choice on the 1st <SELECT> effects what the possible
choices are for the 2nd element. Currently the 2nd element is a <TEXT>
input, but I'd like to be able to make it a <TEXT> element when certain
items are selected from the 1st <SELECT> and a <SELECT> when other choices
are selected. Is there a way to either change an element from <TEXT> to
<SELECT> (and back), or to make a <SELECT> or <TEXT> element disappear
without re-writing the entire page?

Thanks!

Hal

[Martin Honnen]

Hal Vaughan wrote:

I have a case where the user can select several choices from my 1st <SELECT>
element. The user's choice on the 1st <SELECT> effects what the possible
choices are for the 2nd element. Currently the 2nd element is a <TEXT>
input, but I'd like to be able to make it a <TEXT> element when certain
items are selected from the 1st <SELECT> and a <SELECT> when other choices
are selected. Is there a way to either change an element from <TEXT> to
<SELECT> (and back), or to make a <SELECT> or <TEXT> element disappear
without re-writing the entire page?

It doesn't depend on the type of the element, if you have a reference to
an element in the HTML page and if the browser like Netscape 6+, IE4+,
Opera 7 supports toggling the CSS display property of an element then
you can do
if (element.style) {
element.style.display = 'none';
}
to hide the element and
if (element.style) {
element.style.display = '';
}
to show it again.
If you are scripting form controls inside a <form> container then the
usual way to access another control element object is alike
<form ...>
...
<select name="select0"
onchange="if (this.selectedIndex == 3) {
var element = this.form.elements.select1;
if (element.style) {
element.style.display = 'none';
}
}">
...
</select>
...
<select name="select1" ...>
if (this.s

--

Martin Honnen
http://JavaScript.FAQTs.com/