Radio Button javascript onclick show hide textbox

Report · Jun 20, 2007

Currently, if the radio button is clicked then text box is shown else if radio button 2 is clicked then textbox is invisible. (only one textbox being shown or being hidden)

I wish to have 2 text boxes

If radio button 1 is clicked then textbox1 is visible
If radio button 2 is clicked then textbox2 is visible.

What changes do I have to do in my code for this to work?

feel free to test this.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function hide() {
var div_ref = document.all("id_div");
div_ref.style.visibility = "hidden";
}

function show() {
var div_ref = document.all("id_div");
div_ref.style.visibility = "visible";
}

</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

</head>

<body>
<tr>
<td>
Select Device Type <BR>
</td>
<td style="width:200">
<input type="Radio" name="DeviceGroup" value="Radiobutton1" onclick="show();" checked="checked">Radio button 1
<input type="Radio" name="DeviceGroup" value="Radiobutton2" onclick="hide();" unchecked>Radio button 1
</td>
<td>
<div id=id_div style="visibility:hidden;">
Show Textbox1
<input type="Text" name="Textbox1">
</div>
</td>
</tr>

</body>
</html>

Thanks

Report · Jun 20, 2007

being that you are not working within a form, i am assuming that you are not going to be submitting data depending on the active text box. and in assuming this, why use form elements anyway?

also, instead of having 2 javascripts controlling the show hide, just join them and assume that at each click the div is visible.

the first part of the if statement in the js just makes sure the div's display is none. then it displays the one you are calling.
the else allows you to close the divs without having any open.

i'm doing this from home, so i cant really test it, but, it looks like it should work.

Report · Jun 26, 2007

thanks

YES
i will be submitting data to a field in the database.

First the vlaue of the radio Button
For example if the first radio button
then the value of the first radio button value =1
goes to the field in the database

also

the text box that will show. will have data entered in the tesx box and the value will be submitted
to a field.

thanks

shall i still use your code????

thanks

--------------------------------

also, instead of having 2 javascripts controlling the show hide, just join them and assume that at each click the div is visible.

the first part of the if statement in the js just makes sure the div's display is none. then it displays the one you are calling.
the else allows you to close the divs without having any open.

i'm doing this from home, so i cant really test it, but, it looks like it should work.

Attach Code

Report · Jun 26, 2007

Hello elDonrico
thanks
do i replace the current java script function in the head and the java script in the body.

or

do i just add your code?

thanks

Report · Jun 26, 2007

Hello elDonrico,

i have just tried out your code and it works great.

what changes do i have to do to make the link a radio button and the text to be the text box?

again,
thanks

Radio Button javascript onclick show hide textbox

Photos