How do I program a radio button to open an "invisible" input field?

[magikeys]

Hello everyone. I'm new to programming, although I've learned HTML and CSS pretty thoroughly. I think I have most of the Javascript basics down as far as definitions, but I'm getting hung up on the actual coding.

I'm working on an information request form for my fiancee's business site. In it, I want to have options that users select via radio buttons. Rather than having additional input fields static on the page, I would like to program some of the radios, when clicked, to open a previously unseen option where users will then be able to type in the necessary information. More specifically, since she only works in two states, I want a third option of "other," which, when opened, will allow the user to input any other state. Then, should the radio be deselected or reset, the field would disappear again.

If my understanding is correct, I think I will need to use a javascript function in the header, an HTML "div" section with ID, "onclick" and "offclick" events in the button mark-up, and the specific javascript code to call the function (getElementById?). Or maybe I'm way off.

Please help. Thanks

[Philip M]

Here you are:-

<form>
New York <input type = "radio" name = "rad1" onclick = "showbox()">
New Jersey <input type = "radio" name = "rad1"onclick = "showbox()">
Other <input type = "radio" name = "rad1" onclick = "showbox()">
<span id = "theBox" style="display:none">Enter name of another state <input type = "text" id = "otherState"</span>
</form>

<script type = "text/javascript">

function showbox() {
var r = document.forms[0].rad1;
var len = r.length;
for (var i =0; i<len; i++) {
if (r[0].checked || r[1].checked) {
document.getElementById("otherState").value = "";
document.getElementById("theBox").style.display="none";
}
if (r[2].checked) {
document.getElementById("theBox").style.display="";
}
}

}

</script>

"In the beginner's mind there are many possibilities, but in the expert's mind there are few” - Shunryu Suzuki (Japanese Zen priest, ?-1971)

[magikeys]

Thank you so much. That code was exactly what I needed. Now I just need to learn how it works. Thanks again.

[magikeys]

New Problem:

Earlier, I asked about programming a radio button to display a hidden field. Thanks to PhilipM for the help.

However, since then, I've been experimenting with the same concept, but using a drop-down menu instead of radio buttons. I used the code PhilipM provided me for the radios as a springboard and tried to rewrite it to be appropriate for the drop-down menu. Unfortunately, it doesn't work. I'm obviously missing something. The options in the drop-down would be "Choose one...", "MN," "WI," and "Other," where "Other" would initiate an additional input field for the user to enter his/her state in text.

Here's the code I've come up with so far:

<form action="">
<font color="red">*</font>State: 
<select name="rad1"><option selected="selected" onselect="showbox()">Choose...</option>
<option onselect="showbox()">MN</option>
<option onselect="showbox()">WI</option>
<option onselect="showbox()">Other</option></select>
<span id = "theBox" style="display:none">state here:<input type = "text" id = "otherState"/></span>

<script language="JavaScript"> 
<!--hide 

function showbox() {
var r = document.forms[0].rad1;
var len = r.length;
for (var i =0; i<len; i++) {
if (r[0].checked || r[1].checked || r[2].checked) {
document.getElementById("otherState").value = "";
document.getElementById("theBox").style.display="none";
}
if (r[3].checked) {
document.getElementById("theBox").style.display="";
}
}

}

Thanks for any help.

[Old Pedant]

Wow. Not even close.

(1) language="javascript" is obsolete. Use type="text/javascript".
(2) You don't need to "hide" javascript from browsers that don't support it. For one thing, your page won't work if the browser doesn't support javascript. But more importantly, the need to do that vanished with MSIE 3 in about 1998.
(3) You can't use onselect in <option>s. Instead, use onchange in the <select>.
(4) *IF* you give each of the <option>s a value=, then you can get the user-selected option using just the .value property of the <select>.
(5) <option>s are *never* checked. They will show as selected if indeed they are selected, but see (4). No reason to check the individual options in any case.
(6) If you only give an ID to a <form> field, then that field *CAN NOT BE SEEN* by any page/code that the <form> gets posted to (that is, it will be invisible to the page specified by the <page>'s action=).
(7) If you pass any <form> field to a function (which I do below by passing this to the showbox() function), then you can reach the <form> for that field (and, presumably, the <form> for other fields) using the .form property of the field. From there, you can reach any field in the <form> using the name of the field.
(8) It's not necessary, but it's usually good practice to put your <script>s in the <head> of the page.

I think that will do it. If not, somebody else will tell me what I missed.

<html>
<head>
<script type="text/javascript"> 
function showbox(select) 
{
    select.form.otherState.value = ""; // reset the text box value
    document.getElementById("theBox").style.display =
        select.value == "Other" ? "inline" : "none";
}
</script>
</head>
<body>


<form action="">
<font color="red">*</font>State: 
<select name="state" onchange="showbox(this)">
    <option value="" selected="selected">Choose...</option>
    <option value="MN">MN</option>
    <option value="WI">WI</option>
    <option value="Other">Other</option>
</select>
<span id="theBox" style="display:none">
    state here: <input type="text" name="otherState"/>
</span>

</form>
</body>
</html>

[Old Pedant]

Philip's radio button code has a couple of goofs in it.

I mentioned the mistake in using id="otherState" for the <form> field (assuming the <form> will be sent along to another page via the action=).

The other goof is that there is no reason at all for the for loop, since he never actually uses the loop index and instead just tests the radio buttons by number.

Philip could have coded it thus:

function showbox() {
    var r = document.forms[0].rad1;
    if (r[0].checked || r[1].checked) {
        document.forms[0].otherState.value = ""; // using name instead of id
        document.getElementById("theBox").style.display="none";
    }
    if (r[2].checked) {
        document.getElementById("theBox").style.display="";
    }
}

Or, perhaps more cautiously (in case you added other radio buttons, later) thus:

function showbox() {
    // if a radio button was clicked on, always change the otherState:
    document.forms[0].otherState.value = "";
    // and assume that it was *NOT* the "other" button...
    document.getElementById("theBox").style.display = "none";

    var r = document.forms[0].rad1;
    var len = r.length;
    for (var i =0; i<len; i++) {
        if (r[i].checked && r[i].value == "Other" ) {
            // only if the "Other" button was checked do we display theBox
            document.getElementById("theBox").style.display = "inline";
        }
   }
}

But that assumes that you give values to your radio buttons, which is a good idea if you want to be able to READ those values on the page your action= in the form submits the form to. Thus:

<form action="some PHP or ASP or JSP or whatever page" >
New York   <input type="radio" name="rad1" value="NY" onclick="showbox()"/>
New Jersey <input type="radio" name="rad1" value="NJ" onclick="showbox()"/>
Other      <input type="radio" name="rad1" value="Other" onclick="showbox()"/>
<span id = "theBox" style="display:none">
    Enter name of another state <input type = "text" name="otherState"/>
</span>
</form>

And that will work no matter how many radio buttons you have.

[webdev1958]

<option onselect="showbox()">MN</option>

It appears you might need some help with event types.

Also if you look up a particular element, like <select> or <option>, it will give a description of it along with its properties and the events it supports.

[webdev1958]

(8) It's not necessary, but it's usually good practice to put your <script>s in the <head> of the page.

That, by many nowadays, is considered to be the "old way" of doing things. Best practice nowadays is to put your javascript just above the </body> tag

[Old Pedant]

I know the reasoning behind both <head> positioning and pre-</body> positioning. I personally prefer functions in the <head>, but I'm not fanatic about it. And, in many of my own pages, indeed I put the code just before the </body>, though usually it's to avoid the need for window.onload.

[webdev1958]

The main advantage, as I see it, to put the js above the closing body tag is that the user doesn't have to wait for all js to be loaded first (if it's in the <head>) before any of the page content in the <body> begins to appear.

Though, if there is only a small amount of js then the user won't even notice the difference in time it takes the content to appear.

[Old Pedant]

Yep. Agreed.

[magikeys]

Yes!!! You all are awesome. As a newbie to this stuff, it's all pretty daunting for me. Thanks so much for the help. I'm learning a ton.