...

View Full Version : Hide/Show Radio Buttons



crvt75
03-17-2004, 05:58 PM
Hi,

Iím working on a form where the user has 3 options (radio buttons) to pick from. Once one of the radio buttons is picked, there are another set of radio buttons that also needs to be selected.

I would like all the second options to be hidden and only appear when that particular radio button is selected. For example radio button 1 is selected and the options for radio button 1 only appear. Radio button 2 is selected and the options for radio button 2 only appear. And the same with radio button 3.

Here is the code for the radio buttons and the options:

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

<TABLE BORDER=0 WIDTH=100% CELLPADDING=3 CELLSPACING=1>
<TR>
<TD><FONT SIZE=-2 FACE="Verdana, Arial">
<INPUT TYPE="radio" NAME="GiftPrice" VALUE="Ten Dollar Gift"> <B>$10.00 Gift</B> (Pick Below)
</TD>
<TD><FONT SIZE=-2 FACE="Verdana, Arial">
<INPUT TYPE="radio" NAME="GiftPrice" VALUE="Fifteen Dollar Gift"> <B>$15.00 Gift</B> (Pick Below)
</TD>
<TD><FONT SIZE=-2 FACE="Verdana, Arial">
<INPUT TYPE="radio" NAME="GiftPrice" VALUE="Twenty Dollar Gift"> <B>$20.00 Gift</B> (Pick Below)
</TD>
</TR>

<TR>
<TD VALIGN=top STYLE="font-family: Verdana; font-style: normal; font-weight: normal; font-size: 7pt; font-variant: normal">
<INPUT TYPE="radio" NAME="TenDollarGift" VALUE="Key Chains - Valet Series"> Key Chains - Valet Series<BR>
<INPUT TYPE="radio" NAME="TenDollarGift" VALUE="Key Chains - Cable Collection"> Key Chains - Cable Collection<BR>
<INPUT TYPE="radio" NAME="TenDollarGift" VALUE="Key Chains - Classic Collection"> Key Chains - Classic Collection <BR>
<INPUT TYPE="radio" NAME="TenDollarGift" VALUE="Key Chains - Elegance Collection"> Key Chains - Elegance Collection<BR>
<INPUT TYPE="radio" NAME="TenDollarGift" VALUE="Key Chains - Key Lights"> Key Chains - Key Lights<BR>
<INPUT TYPE="radio" NAME="TenDollarGift" VALUE="Key Chains - Padlock Collection"> Key Chains - Padlock Collection<BR>
<INPUT TYPE="radio" NAME="TenDollarGift" VALUE="Key Chains - Trillium Collection"> Key Chains - Trillium Collection<BR>
<INPUT TYPE="radio" NAME="TenDollarGift" VALUE="Key Chains - Vogue Collection"> Key Chains - Vogue Collection<BR>
<INPUT TYPE="radio" NAME="TenDollarGift" VALUE="CD Sun Visor"> CD Sun Visor<BR>
<INPUT TYPE="radio" NAME="TenDollarGift" VALUE="Sunglass Visor Clip"> Sunglass Visor Clip<BR>
<INPUT TYPE="radio" NAME="TenDollarGift" VALUE="Mag-Lite AAA Solitaire"> Mag-Lite AAA Solitaire
</TD>

<TD VALIGN=top STYLE="font-family: Verdana; font-style: normal; font-weight: normal; font-size: 7pt; font-variant: normal">
<INPUT TYPE="radio" NAME="FifteenDollarGift" VALUE="Rand McNally Atlas"> Rand McNally Atlas<BR>
<INPUT TYPE="radio" NAME="FifteenDollarGift" VALUE="Stainless Steel Travel Mug"> Stainless Steel Travel Mug<BR>
<INPUT TYPE="radio" NAME="FifteenDollarGift" VALUE="Mag-Lite AAA Solitaire"> Mag-Lite AAA Solitaire<BR>
<INPUT TYPE="radio" NAME="FifteenDollarGift" VALUE="Windsor Reflections CD Case"> Windsor Reflections CD Case
</TD>

<TD VALIGN=top STYLE="font-family: Verdana; font-style: normal; font-weight: normal; font-size: 7pt; font-variant: normal">
<INPUT TYPE="radio" NAME="TwentyDollarGift" VALUE="MicroTek Visor CD Case"> MicroTek Visor CD Case<BR>
<INPUT TYPE="radio" NAME="TwentyDollarGift" VALUE="Copper Travel Mug"> Copper Travel Mug<BR>
<INPUT TYPE="radio" NAME="TwentyDollarGift" VALUE="Challenger Pen Set"> Challenger Pen Set<BR>
<INPUT TYPE="radio" NAME="TwentyDollarGift" VALUE="Auto Vacuum Cleaner"> Auto Vacuum Cleaner<BR>
<INPUT TYPE="radio" NAME="TwentyDollarGift" VALUE="Summit CD file holder"> Summit CD file holder
</TD>
</TR>
</TABLE>

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

Is this possible?

Any help would be appreciated. Thanks is advance.

crvt75

Willy Duitt
03-17-2004, 06:14 PM
This should get you started:

<script type="text/javascript">
<!--//
function doit(showIt){
document.getElementById('subDiv1').style.display = (showIt) ? 'block' : 'none';
}
//-->
</script>
<table cellpadding="0" cellspacing="15">
<tr>
<td width="300"><label>
<input type="radio" name="MyRadioGroup1" value=1 onClick="doit(1)">
Create New Radio Group</label></td>

<td width="300"><label>
<input type="radio" name="MyRadioGroup1" value=1 onClick="doit(0)">
A Plain Radio Button</label></td>
</tr>
<tr>
<td>
<div id="subDiv1" style="display:none">
<table>
<tr>
<td width="200"><label>
<input type="radio" name="MyRadioGroup2" value="1">
Sub-Group 1</label></td>
<td width="200"><label>
<input type="radio" name="MyRadioGroup2" value="2">
Sub-Group 2</label></td>
<td width="200"><label>
<input type="radio" name="MyRadioGroup2" value="3">
Sub-Group 3</label></td></tr>
</tr></table>
</td></tr></table>

.....Willy

crvt75
03-18-2004, 02:42 PM
Willy,

Thanks for the response.

I still have a question...how would I code the sub-category for the Radio Button "A Plain Radio Button" in your example?

New to JavaScript, so please bear with me.

crvt75

Willy Duitt
03-18-2004, 05:08 PM
If you would have posted the script you were working with someone could have helped point out where you may have been going wrong instead of writing the code for you. ;)


<script type="text/javascript">
<!--//
function doit(which){
var num = 3; //NUMBER OF SUB-MENU'S TO SHOW/HIDE //;
for(var count=1;count<=num;count++){
var div = document.getElementById('subDiv'+count);
if(count==which) div.style.display = 'block';
else div.style.display = 'none';
}
}
//-->
</script>
</HEAD>

<BODY>
<div><label><input type="radio" name="MyRadioGroup1" value=1 onClick="doit(1)">
Create New Radio Group One</label>
<span id="subDiv1" style="display:none">
<label><input type="radio" name="MyRadioGroup2" value="1_1">
Sub-Group 1_1</label><label>
<input type="radio" name="MyRadioGroup2" value="1_2">
Sub-Group 1_2</label>
<label>
<input type="radio" name="MyRadioGroup2" value="1_3">
Sub-Group 1_3</label></span></div>

<div><label><input type="radio" name="MyRadioGroup1" value=1 onClick="doit(2)">
Create New Radio Group Two</label>
<span id="subDiv2" style="display:none">
<label><input type="radio" name="MyRadioGroup2" value="2_1">
Sub-Group 2_1</label><label>
<input type="radio" name="MyRadioGroup2" value="2_2">
Sub-Group 2_2</label>
<label><input type="radio" name="MyRadioGroup2" value="2_3">
Sub-Group 2_3</label></span></div>


<div><label><input type="radio" name="MyRadioGroup1" value=1 onClick="doit(3)">
Create New Radio Group Three</label>
<span id="subDiv3" style="display:none">
<label> <input type="radio" name="MyRadioGroup3" value="3_1">
Sub-Group 3_1</label>
<label> <input type="radio" name="MyRadioGroup3" value="3_2">
Sub-Group 3_2</label>
<label><input type="radio" name="MyRadioGroup3" value="3_3">
Sub-Group 3_3</label></span>
</div>

.....Willy

crvt75
03-18-2004, 05:19 PM
Willy,

I did not post the script, because I did not know how to write it.

Thanks for the code...that is exactly what I was looking for.

crvt75

Willy Duitt
03-18-2004, 05:46 PM
I was merely pointing out that it is easier to learn from our mistakes than trying too, but not completely understanding a piece of code which someone else wrote. ;)

Your Welcome. :thumbsup:
Gald I could help;
.....Willy



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum