select a radiobutton and a correspinding text box will show/visible

**pbmods** · Jun 27 '07, 02:52 AM

Heya, Bry. Welcome to TSDN!

You'll want to add an onclick handler for each radio button that hides all of the textboxes and shows only the textbox that corresponds to that radio button.

You may also have to manually set the checked property of each radio button, as setting an onclick handler for radio controls tends to disrupt normal event firing.

Hints:

To hide an element:[code=javascript]document.getEle mentById('theID OfTheElementTha tYouWantToEdit' ).style.visibil ity = 'hidden';[/code]
To show an element:[code=javascript]document.getEle mentById('theID OfTheElementTha tYouWantToEdit' ).style.visibil ity = 'visibile';[/code]

Note that in order to use document.getEle mentById, you also need to give your elements IDs in addition to names.

P.S.

The experts on this site are more than happy to help you with your problems but they cannot do your assignment/program for you. Attempt the assignment/program yourself first and post questions regarding any difficulties you have or about a particular function of the code that you don't know how to achieve.

Please read the Posting Guidelines and particularly the Coursework Posting Guidlines.

Then when you are ready post a new question in this thread.

MODERATOR

**briankind** · Jun 27 '07, 03:31 PM

Thanks
so far i have this. it is not working how i wanted to be.

it is not showing corresponding text box per radio button.

instead it is just hiding both text box when the radio button2 is selected
and showing both textbox when the radio button1 is selected.



[HTML]<html>

<head>
<script type="text/javascript">
function hide() {
var div_ref = document.getEle mentById("id_te xtbox_1");
div_ref.style.v isibility = "hidden";
}

function show() {
var div_ref = document.getEle mentById("id_te xtbox_1");
div_ref.style.v isibility = "visible";
}

</script>

</head>

<body>
<tr>
<td>
Select radio button type <BR>
</td>
<td style="width:20 0">
<input type="Radio" name="Radiobutt onGroup" value="Radiobut ton1" onclick="show() ;" checked="checke d">Radio button 1
<input type="Radio" name="Radiobutt onGroup" value="Radiobut ton2" onclick="hide() ;" unchecked>Radio button 2
</td>
<td>
<div id=id_textbox_1 style="visibili ty:hidden;">
Show Textbox1
<input type="Text" name="Textbox1" >
Show Textbox2
<input type="Text" name="Textbox2" >
</div>
</td>
</tr>

</body>
</html>[/HTML]

**improvcornartist** · Jun 27 '07, 04:21 PM

Originally posted by briankind

Thanks
so far i have this. it is not working how i wanted to be.

it is not showing corresponding text box per radio button.

instead it is just hiding both text box when the radio button2 is selected
and showing both textbox when the radio button1 is selected.

Code:

<html>

<head>
<script type="text/javascript">
function hide() {
var div_ref = document.getElementById("id_textbox_1");
  div_ref.style.visibility = "hidden";
}

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


</script>



</head>

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

</body>
</html>

You have specified the id 'id_textbox_1' for the div, which contains both textboxes. So, when you call show or hide, it shows or hides the div (both textboxes). You need to specify an id for each textbox that you will want to change the style of and use that id in your show and hide functions.

**silviasalsa** · Jun 27 '07, 04:36 PM

enhance it

like this?

the function stay the same right?

[HTML]<html>

<head>
<script type="text/javascript">
function hide() {
var div_ref = document.getEle mentById("id_te xtbox_1");
div_ref.style.v isibility = "hidden";
}

function show() {
var div_ref = document.getEle mentById("id_te xtbox_1");
div_ref.style.v isibility = "visible";
}

<script type="text/javascript">
function hide() {
var div_ref = document.getEle mentById("id_te xtbox_2");
div_ref.style.v isibility = "hidden";
}

function show() {
var div_ref = document.getEle mentById("id_te xtbox_2");
div_ref.style.v isibility = "visible";
}

</script>

</head>

<body>
<tr>
<td>
Select radio button type <BR>
</td>
<td style="width:20 0">
<input type="Radio" name="Radiobutt onGroup" value="Radiobut ton1" onclick="show() ;" checked="checke d">Radio button 1
<input type="Radio" name="Radiobutt onGroup" value="Radiobut ton2" onclick="hide() ;" unchecked>Radio button 2
</td>
<td>
<div id=id_textbox_1 style="visibili ty:hidden;">
Show Textbox1
<input type="Text" name="Textbox1" >

<div id2=id_textbox_ 2 style="visibili ty:hidden;">
Show Textbox2
<input type="Text" name="Textbox2" >
</div>
</td>
</tr>

</body>
</html>[/HTML]

**briankind** · Jun 27 '07, 05:03 PM

You have specified the id 'id_textbox_1' for the div, which contains both textboxes.

So, when you call show or hide, it shows or hides the div (both textboxes).

You need to specify an id for each textbox that you will want to change the style of and use that id in your show and hide functions.

how and where do you specify an id for each textbox

and how where do you use that id in your show and hide functions?

thanks

**improvcornartist** · Jun 27 '07, 05:22 PM

Instead of

Code:

<div id=id_textbox_1 style="visibility:hidden;">
      Show Textbox1
      <input type="Text" name="Textbox1">
      Show Textbox2
    <input type="Text" name="Textbox2">
      </div>

you would use

Code:

<div style="visibility:hidden;">
      Show Textbox1
      <input type="Text" name="Textbox1" id=id_textbox_1>
      Show Textbox2
    <input type="Text" name="Textbox2" id=id_textbox_2>
      </div>

You would have to change your functions accordingly in getElementById( "id_textbox_num ber").

**briankind** · Jun 27 '07, 06:14 PM

?still struggling

?
still struggling
still struggling
still strugglingstill strugglingstill strugglingstill struggling

**briankind** · Jun 27 '07, 06:21 PM

Like this
?

[HTML]<html>

<head>
<script type="text/javascript">
function hide() {
var div_ref = document.getEle mentById("id_te xtbox_1");
div_ref.style.v isibility = "hidden";
}

function show() {
var div_ref = document.getEle mentById("id_te xtbox_1");
div_ref.style.v isibility = "visible";
}

function hide2() {
var div_ref = document.getEle mentById("id_te xtbox_2");
div_ref.style.v isibility = "hidden";
}

function show2() {
var div_ref = document.getEle mentById("id_te xtbox_2");
div_ref.style.v isibility = "visible";
}

</script>

</head>

<body>
<tr>
<td>
Select radio button type <BR>
</td>
<td style="width:20 0">
<input type="Radio" name="Radiobutt onGroup" value="Radiobut ton1" onclick="show() ;" checked="checke d">Radio button 1

<input type="Radio" name="Radiobutt onGroup" value="Radiobut ton2" onclick="hide() ;" unchecked>Radio button 2

</td>

<td>
<div style="visibili ty:hidden;">
Show Textbox1
<input type="Text" name="Textbox1" id=id_textbox_1 >

or

Show Textbox2
<input type="Text" name="Textbox2" id=id_textbox_2 >
</div>
</td>
</tr>

</body>
</html>[/HTML]

**silviasalsa** · Jun 27 '07, 08:47 PM

I guess it is working.
it is outputing out the text but as far as checkboxes can someon check.
dont know if it is outputing the same textbox1
thanks
Please check it
[HTML]<html>

<script type="text/javascript" language="JavaS cript"></script>

</head>

<body>
<p>

<td style="width:20 0">
<input type="Radio" name="DGroup" value="Radiobut ton1" onclick="javasc ript:ReverseDis play('textbx1') " checked="checke d">Radio button 1

<input type="Radio" name="DGroup" value="Radiobut ton2" onclick=
"javascript:Rev erseDisplay('te xtbx2')" unchecked>Radio button 1
</td>
</p>
<p> </p>
<div id="textbx1" style="display: none;">
Fortextbx1

Show Textbox1
<input type="Text" name="textbx1">

</div>

<div id="textbx2" style="display: none;">
Fortext2
Show Textbox2
<input type="Text" name="textbx2">
</div>

</body>
</html>[/HTML]

**acoder** · Jun 28 '07, 10:29 AM

Please enclose your posted code in [CODE] tags (See How to Ask a Question).

This makes it easier for experts to read and understand it. Failing to do so creates extra work for the moderators, thus wasting resources, otherwise available to answer the members' questions.

Please use [CODE] tags in future.

MODERATOR.

**KishoreM** · Jun 28 '07, 10:34 AM

Originally posted by briankind

Hello
i have these radio buttons and i wish to have the corresponding textboxes to be visible when the radiobutton is selected.

any Help?
snippets.
thanks

thanks in adv
Bry

here is the html:

[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

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

</head>

<body>
<tr>
<td>

<form>
<input type="radio" name="Radiobutt onGroup1" value="Radio_bu tton1"> Radio_button1
<br>
<input type="radio" name="Radiobutt onGroup1" value="Radio_bu tton2"> Radio_button2
<br>
<input type="radio" name="Radiobutt onGroup1" value="Radio_bu tton3"> Radio_button3
<br>
<input type="radio" name="Radiobutt onGroup1" value="Radio_bu tton4"> Radio_button4
</form>

</td>
<td>

<form>
texbox 1:
<input type="text" name="texbox1">
<br>
texbox 2:
<input type="text" name="texbox2">
<br>
texbox 3:
<input type="text" name="texbox3">
<br>
texbox 4:
<input type="text" name="texbox4">
</form>

</td>
</tr>

</body>
</html>[/HTML]

Hi,
here I have created a sample html page as per you requirement please go through the code and if you have any probs revert to me.

regards,

Kishore M

[HTML]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

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

<script>
var gVar="";

function fun(self,taxnam e)
{

if(self.checked == true)
{
if(gVar != "")
{
document.getEle mentById(gVar). style.visibilit y='hidden';
}
document.getEle mentById(taxnam e).style.visibi lity='visible';
gVar=taxname;
}

}
</script>
</head>

<body>
<tr>
<td>

<form>
<input type="radio" name="Radiobutt onGroup1" value="Radio_bu tton1" onclick="fun(th is,'texbox1')"> Radio_button1
<br>
<input type="radio" name="Radiobutt onGroup1" value="Radio_bu tton2" onclick="fun(th is,'texbox2')"> Radio_button2
<br>
<input type="radio" name="Radiobutt onGroup1" value="Radio_bu tton3" onclick="fun(th is,'texbox3')"> Radio_button3
<br>
<input type="radio" name="Radiobutt onGroup1" value="Radio_bu tton4" onclick="fun(th is,'texbox4')"> Radio_button4
</form>

</td>
<td>

<form>
texbox 1:
<input type="text" name="texbox1" id="texbox1" style="visibili ty:hidden">
<br>
texbox 2:
<input type="text" name="texbox2" id="texbox2" style="visibili ty:hidden">
<br>
texbox 3:
<input type="text" name="texbox3" id="texbox3" style="visibili ty:hidden">
<br>
texbox 4:
<input type="text" name="texbox4" id="texbox4" style="visibili ty:hidden">
</form>

</td>
</tr>

</body>
</html>

[/HTML]

select a radiobutton and a correspinding text box will show/visible

select a radiobutton and a correspinding text box will show/visible

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment