Hide/Show Text + TextField

[Luxury17]

I know this has been posted and asked about many times, but I still cannot seem to find an answer that fits my situation. I am pretty new with javascripting, and have been teaching myself as the need arises for a script. Heres my current problem:

I need a script that would allow a user to choose "Yes" and "No" from a drop down box. When "Yes" is chosen, instructions and a textfield will display below that drop down box. If they choose "No", the instructions and textfield do not appear.

Problem two is that I can only use javascript to do this (the interface I use is strict).

Any thoughts?

[hsriat]

Make a select box. As you said, make two options in it: 'yes' and 'no'.
Onclick event of both the options, add a function, say displayHide(). But provide different argument both times. (ie. true and false)
[HTML]<select>
<option onclick="displa yHide(true)">Ye s</option>
<option onclick="displa yHide(false)">N o</option>
</select>[/HTML]

Now make a div which will contain your text.
[HTML]<div id="mytext">you r text here</div>[/HTML]

Now make the function displayHide(fla g) which will hide or display the text depending upon the flag.
[CODE=javascript]function displayHide(fla g) {
document.getEle mentById('mytex t').style.displ y = flag ? '' : 'none';
}[/CODE]

[Luxury17]

Thanks for the quick reply hsriat. It seems in my hurriedness to get this post out before a meeting, I neglected to mention that I use tables, cannot use CSS within this interface, and that hiding a row in the table would be the easiest option. I am also not able to set the Onclick options for the Yes or No options due to the way the interface is built.

I think I may be up a creek here, but wanted to reply with that information and see if you had anymore thoughts, along with apologizing for wasting your time with the last post.

[hsriat]

Thanks for the quick reply hsriat. It seems in my hurriedness to get this post out before a meeting, I neglected to mention that I use tables, cannot use CSS within this interface, and that hiding a row in the table would be the easiest option. I am also not able to set the Onclick options for the Yes or No options due to the way the interface is built.

I think I may be up a creek here, but wanted to reply with that information and see if you had anymore thoughts, along with apologizing for wasting your time with the last post.

Then you may dynamically provide the function to the select options.
[CODE=javascript]window.onload = function () {
var opts = document.getEle mentById('selec tBoxId').option s;
opts[0].onclick = function () { hideDisplay(tru e); };
opts[1].onclick = function () { hideDisplay(fal se); };
}[/CODE]
And in the hideDisplay function, instead of the div, refer the td element.

[Luxury17]

That did it. Thanks!

[hsriat]

That did it. Thanks!

You are welcome!

[acoder]

Why not a select onchange?

You could also consider using two radio buttons (with label to make it easier to click/select) or a single checkbox instead.

[Luxury17]

I could do radio buttons. Is a select onchange an easier way to do this?

[acoder]

Since there's only two options, it'd make more sense to have a single checkbox or two radio buttons. If you are going to use a select, an onchange is easier/makes more sense than attaching an onclick to each option. An onchange event will fire whenever an option changes in the select element.

[Luxury17]

Since there's only two options, it'd make more sense to have a single checkbox or two radio buttons. If you are going to use a select, an onchange is easier/makes more sense than attaching an onclick to each option. An onchange event will fire whenever an option changes in the select element.

That does sound easier than the drop down. Now how do I go about doing it? I am new to javascripting and I'm learning as I go along.

[hsriat]

[CODE=javascript]window.onload = function () {
var chk = document.getEle mentById('check BoxId');
chk.onclick = function () { hideDisplay(chk .checked); };
}[/CODE]