radio button for display content

tachyon80 · Jun 19, 2004

I found this script to change an image based on the radio button selected:

<FORM action="" method=post>
<TABLE cellSpacing=0 cellPadding=0 width=429 border=0>
<TBODY>
<TR>
<TD><INPUT onclick="document.images['rx-78-2'].src=(this.value)" type=radio CHECKED value=a.jpg name=rx-78-2> </TD>
<TD><INPUT onclick="document.images['rx-78-2'].src=(this.value)" type=radio value=b.jpg name=rx-78-2> </TD></TR>
<TR vAlign=top>
<TD>
1</TD>
<TD>
2</TD></TR></TBODY></TABLE></FORM></DIV>
<DIV align=center>
<TABLE cellSpacing=0 cellPadding=0 width=429 border=0>
<TBODY>
<TR>
<TD>
<DIV align=center><IMG height=400 alt="" src="us-add.php" width=400 border=0 name=rx-78-2></DIV></TD></TR></TBODY></TABLE>

How do I use radio buttons to display different sets of form fields within a larger form on a page? Instead of switching images, I want to switch HTML code.

LFI · Jun 19, 2004

There are different ways to go about this. For small, non-expanding systems, I would recommend putting the different groups of HTML into DIV tags, setting the style.display to 'inline' for those you want to show and style.disply to 'none' for those you don't.

Quick example:

Code:

<html>
<head>
<script>
var divs;
function changeWhatIsShown(radioBId)
[b]//parameter recieved is id of radio button[/b]
{
 if(!divs) [b]//only collect the DIVs one time[/b]
  divs = document.getElementsByTagName("DIV"); [b]//getElementsByTagName(...) might be an IE-specific command.  Not sure.  There are ways around this if so.[/b]

 for(var i=0; i<divs.length; i++)
 {
  if(divs[i].id == radioBId +"Div")
   divs[i].style.display = 'inline'; [b]//shows DIV[/b]
  else
   divs[i].style.display = 'none'; [b]//hides DIV[/b]
 }//end for
}//end changeWhatIsShown(var)
</script>
</head>
<body>
[b]<!-- RADIO buttons have same NAME, but different IDs -->[/b]
<input type='radio' name='radioGroup' id='radio1' onclick='changeWhatIsShown(this.id);' />First Div<br />

<input type='radio' name='radioGroup' id='radio2' onclick='changeWhatIsShown(this.id);' />Second Div<br />

<input type='radio' name='radioGroup' id='radio3' onclick='changeWhatIsShown(this.id);' />Third Div<br />

[b]<!-- DIVs have ID that corresponds to the RADIO button they are associated with.  ID formula:  RADIO button ID + "Div" -->[/b]
[b]<!-- "style='display:none'" hides a DIV initially -->[/b]
<div id='radio1Div' style='display:none'>
This is the First Div
</div>

<div id='radio2Div' style='display:none'>
This is the Second Div
</div>

<div id='radio3Div' style='display:none'>
This is the Third Div
</div>
</body>
</html>

Because of the hiding/showing of stuff, this is obviously different than the IMG-changing script you provided above.

If you use form-elements inside the DIVs, you may want to clear their values as their respective DIVs are being hidden, so that those values are not accidentally submitted with the form.

I'm not exactly sure if they would be, but it couldn't hurt.

Well, it depends exactly on what you want to do. Let us know if that's an issue.

'hope this helped.

--Dave

tachyon80 · Jun 19, 2004

Thanks for the information and code sample.

What I'm doing is making an "update your profile" form. The section of the form that uses the radio buttons is for addresses. Button 1 - U.S. addresses, 2 - Canada, 3 - other countries. There will be some repeated fields and some different fields based on the selection.

I will probably want each field to hold a value "<?php echo $row['stuff']; ?>" so that it can fetch previously entered info from the MySQL database. Do you think this will be a problem?

LFI · Jun 19, 2004

If it's just for addresses, then I think the way I described would work just fine. I'm not familiar with PHPs, but give it a try and let us know what problems (if any) you encounter.

Good luck!

--Dave

tachyon80 · Jun 19, 2004

I found a solution that looks like it will work for me. I'll use PHP include commands to only include the form fields I want to use.

<div id='radio1Div' style='display:inline'>
<?php include("us_add.html") ?>
</div>

<div id='radio2Div' style='display:none'>
<?php include("canada_add.html") ?>
</div>

<div id='radio3Div' style='display:none'>
<?php include("other_add.html") ?>
</div>

tachyon80 · Jun 19, 2004

Help! Everything was going great until I tried to use it twice on the same page. When I click a radio button in one area, everything disappears from the other area.

CODE:
------------
<html>
<head>
<title>Untitled</title>
<script>
var divs;
function changeWhatIsShown(radioBId)
//parameter recieved is id of radio button
{
if(!divs) //only collect the DIVs one time
divs = document.getElementsByTagName("DIV"); //getElementsByTagName(...) might be an IE-specific command. Not sure. There are ways around this if so.

for(var i=0; i<divs.length; i++)
{
if(divs.id == radioBId +"Div")
divs.style.display = 'inline'; //shows DIV
else
divs.style.display = 'none'; //hides DIV
}//end for
}//end changeWhatIsShown(var)
</script>

<script>
var divs2;
function changeWhatShown(radioBId)
{
if(!divs2)
divs2 = document.getElementsByTagName("DIV");

for(var i=0; i<divs2.length; i++)
{
if(divs2.id == radioBId +"Div")
divs2.style.display = 'inline';
else
divs2.style.display = 'none';
}
}
</script>
</head>

<body>
Address: <input type="radio" CHECKED name="theaddress" id="add1" onclick='changeWhatIsShown(this.id);'>U.S.  
<input type="radio" name="theaddress" id="add2" onclick='changeWhatIsShown(this.id);'>Canada  
<input type="radio" name="theaddress" id="add3" onclick='changeWhatIsShown(this.id);'>other country<br><br>


<div id='add1Div' style='display:inline'>
<?php include("us-add.inc") ?>
</div>
<div id='add2Div' style='display:none'>
<?php include("can-add.inc") ?>
</div>
<div id='add3Div' style='display:none'>
<?php include("oth-add.inc") ?>
</div><br><br>
Current Address (if different): <input type="radio" CHECKED name="theaddress2" id="m-add1" onclick='changeWhatShown(this.id);'>U.S.  
<input type="radio" name="theaddress2" id="m-add2" onclick='changeWhatShown(this.id);'>Canada  
<input type="radio" name="theaddress2" id="m-add3" onclick='changeWhatShown(this.id);'>other country<br><br>
<div id='m-add1Div' style='display:inline'>
<?php include("m-us-add.inc") ?>
</div>
<div id='m-add2Div' style='display:none'>
<?php include("m-can-add.inc") ?>
</div>
<div id='m-add3Div' style='display:none'>
<?php include("m-oth-add.inc") ?>
</div><br><br>
</body>
</html>
-------------------

Here's an example:

http://www.missionbuilders.org/database/sample.php

Any help would be greatly, greatly appreciated.

LFI · Jun 19, 2004

Okay, sure! Complicate things!!!

Solution:

(1) change all the radio button onclicks back to just calling the one function.
(2) instead of sending this.id to the function, just send this.
(3) in the function, change the received parameter to radioB and references to the ID inside the function to radioB.id.

Now, for the tricky part...

(4) add a parameter to the radio buttons and the DIVs in each group called whichDiv. For example:

Code:

Address: <input type="radio" CHECKED name="theaddress" id="add1" [b]whichDiv='1'[/b] onclick='changeWhatIsShown(this);'>U.S.&nbsp;&nbsp;
<input type="radio" name="theaddress" id="add2" [b]whichDiv='1'[/b] onclick='changeWhatIsShown(this);'>Canada&nbsp;&nbsp;
<input type="radio" name="theaddress" id="add3" [b]whichDiv='1'[/b] onclick='changeWhatIsShown(this);'>other country<br><br>
<!-- DIVs have ID that corresponds to the RADIO button they are associated with.  ID formula:  RADIO button ID + "Div" -->
<!-- "style='display:none'" hides a DIV initially -->
<div id='add1Div' [b]whichDiv='1'[/b]style='display:inline'>
address: <input type="text" name="address"><br>
city: <input type="text" name="city"><br>
state: <input type="text" name="state" maxlength="2"> zip: <input type="text" name="zip"><br>
country: USA
<input type="hidden" name="country" value="USA"></div>
<div id='add2Div' [b]whichDiv='1'[/b]style='display:none'>
address: <input type="text" name="address"><br>
city: <input type="text" name="city"><br>
province: <input type="text" name="state" maxlength="2"> postal code: <input type="text" name="zip"><br>
country: Canada
<input type="hidden" name="country" value="Canada"></div>
<div id='add3Div' [b]whichDiv='1'[/b]style='display:none'>
address: <textarea cols="" rows="" name="address">
</textarea><br>
city: <input type="text" name="city"><br>
postal code: <input type="text" name="zip"><br>
country: <select name="country">
</select>
<input type="hidden" name="state" value=""></div>

In the other group, make the value 2.

Then, in the function, change the if-else statements to:

Code:

if(divs[i].id == radioB.id +"Div")
 divs[i].style.display = 'inline'; //shows DIV
else [b]if(divs[i].whichDiv == radioB.whichDiv) //new line[/b]
 divs[i].style.display = 'none'; //hides DIV

The original method assumed that any DIV not associated with the checked radio button was to be made invisible. Bad assumption on my part!

'hope this helped!

--Dave

tachyon80 · Jun 19, 2004

Thanks so much! It works great. You saved my project.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

radio button for display content

tachyon80

Technical User

LFI

Programmer

tachyon80

Technical User

LFI

Programmer

tachyon80

Technical User

tachyon80

Technical User

LFI

Programmer

tachyon80

Technical User

Similar threads

Part and Inventory Search

Sponsor