By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,521 Members | 1,274 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,521 IT Pros & Developers. It's quick & easy.

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

P: 6
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.dtd">
<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="RadiobuttonGroup1" value="Radio_button1"> Radio_button1
<br>
<input type="radio" name="RadiobuttonGroup1" value="Radio_button2"> Radio_button2
<br>
<input type="radio" name="RadiobuttonGroup1" value="Radio_button3"> Radio_button3
<br>
<input type="radio" name="RadiobuttonGroup1" value="Radio_button4"> 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]
Jun 27 '07 #1
Share this Question
Share on Google+
11 Replies


pbmods
Expert 5K+
P: 5,821
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:
    Expand|Select|Wrap|Line Numbers
    1. document.getElementById('theIDOfTheElementThatYouWantToEdit').style.visibility = 'hidden';
  • To show an element:
    Expand|Select|Wrap|Line Numbers
    1. document.getElementById('theIDOfTheElementThatYouWantToEdit').style.visibility = 'visibile';

Note that in order to use document.getElementById, 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
Jun 27 '07 #2

P: 6
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.

<!---------------------------here it is-------HELP THANKS--------------------->

[HTML]<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>[/HTML]
Jun 27 '07 #3

Expert 100+
P: 303
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.

<!---------------------------here it is-------HELP THANKS--------------------->

Expand|Select|Wrap|Line Numbers
  1. <html>
  2.  
  3. <head>
  4. <script type="text/javascript">
  5. function hide() {
  6. var div_ref = document.getElementById("id_textbox_1");
  7.   div_ref.style.visibility = "hidden";
  8. }
  9.  
  10. function show() {
  11. var div_ref = document.getElementById("id_textbox_1");
  12.   div_ref.style.visibility = "visible";
  13. }
  14.  
  15.  
  16. </script>
  17.  
  18.  
  19.  
  20. </head>
  21.  
  22. <body>
  23. <tr>
  24. <td>
  25. Select radio button type <BR>
  26. </td>
  27. <td style="width:200">
  28. <input type="Radio" name="RadiobuttonGroup" value="Radiobutton1" onclick="show();" checked="checked">Radio button 1
  29. <input type="Radio" name="RadiobuttonGroup" value="Radiobutton2" onclick="hide();" unchecked>Radio button 2
  30. </td>
  31. <td>
  32.       <div id=id_textbox_1 style="visibility:hidden;">
  33.       Show Textbox1 
  34.       <input type="Text" name="Textbox1">
  35.       Show Textbox2
  36.       <input type="Text" name="Textbox2">
  37.       </div>
  38. </td>
  39. </tr> 
  40.  
  41. </body>
  42. </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.
Jun 27 '07 #4

P: 4
like this?

the function stay the same right?




[HTML]<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 type="text/javascript">
function hide() {
var div_ref = document.getElementById("id_textbox_2");
div_ref.style.visibility = "hidden";
}

function show() {
var div_ref = document.getElementById("id_textbox_2");
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">

<div id2=id_textbox_2 style="visibility:hidden;">
Show Textbox2
<input type="Text" name="Textbox2">
</div>
</td>
</tr>

</body>
</html>[/HTML]
Jun 27 '07 #5

P: 6
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
Jun 27 '07 #6

Expert 100+
P: 303
Instead of

Expand|Select|Wrap|Line Numbers
  1. <div id=id_textbox_1 style="visibility:hidden;">
  2.       Show Textbox1
  3.       <input type="Text" name="Textbox1">
  4.       Show Textbox2
  5.     <input type="Text" name="Textbox2">
  6.       </div>
you would use

Expand|Select|Wrap|Line Numbers
  1. <div style="visibility:hidden;">
  2.       Show Textbox1
  3.       <input type="Text" name="Textbox1" id=id_textbox_1>
  4.       Show Textbox2
  5.     <input type="Text" name="Textbox2" id=id_textbox_2>
  6.       </div>
You would have to change your functions accordingly in getElementById("id_textbox_number").
Jun 27 '07 #7

P: 6
?
still struggling
still struggling
still strugglingstill strugglingstill strugglingstill struggling
Jun 27 '07 #8

P: 6
Like this
?

[HTML]<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";
}

function hide2() {
var div_ref = document.getElementById("id_textbox_2");
div_ref.style.visibility = "hidden";
}

function show2() {
var div_ref = document.getElementById("id_textbox_2");
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 style="visibility: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]
Jun 27 '07 #9

P: 4
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="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";
}


function ReverseDisplay(d) {
if(document.getElementById(d).style.display == "none")
{
document.getElementById('textbx1').style.display = "none";
document.getElementById('textbx2').style.display = "none";
document.getElementById(d).style.display = "block";
}
else { document.getElementById(d).style.display = "none";
document.getElementById('textbx1').style.display = "none";
document.getElementById('textbx2').style.display = "none";
}
}
//--></script>


</head>

<body>
<p>


<td style="width:200">
<input type="Radio" name="DGroup" value="Radiobutton1" onclick="javascript:ReverseDisplay('textbx1')" checked="checked">Radio button 1

<input type="Radio" name="DGroup" value="Radiobutton2" onclick=
"javascript:ReverseDisplay('textbx2')" unchecked>Radio button 1
</td>
</p>
<p>&nbsp;</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]
Jun 27 '07 #10

acoder
Expert Mod 15k+
P: 16,027
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.
Jun 28 '07 #11

P: 12
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.dtd">
<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="RadiobuttonGroup1" value="Radio_button1"> Radio_button1
<br>
<input type="radio" name="RadiobuttonGroup1" value="Radio_button2"> Radio_button2
<br>
<input type="radio" name="RadiobuttonGroup1" value="Radio_button3"> Radio_button3
<br>
<input type="radio" name="RadiobuttonGroup1" value="Radio_button4"> 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.dtd">
<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,taxname)
{

if(self.checked == true)
{
if(gVar != "")
{
document.getElementById(gVar).style.visibility='hi dden';
}
document.getElementById(taxname).style.visibility= 'visible';
gVar=taxname;
}

}
</script>
</head>

<body>
<tr>
<td>

<form>
<input type="radio" name="RadiobuttonGroup1" value="Radio_button1" onclick="fun(this,'texbox1')"> Radio_button1
<br>
<input type="radio" name="RadiobuttonGroup1" value="Radio_button2" onclick="fun(this,'texbox2')"> Radio_button2
<br>
<input type="radio" name="RadiobuttonGroup1" value="Radio_button3" onclick="fun(this,'texbox3')"> Radio_button3
<br>
<input type="radio" name="RadiobuttonGroup1" value="Radio_button4" onclick="fun(this,'texbox4')"> Radio_button4
</form>

</td>
<td>

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

</td>
</tr>

</body>
</html>

[/HTML]
Jun 28 '07 #12

Post your reply

Sign in to post your reply or Sign up for a free account.