...

View Full Version : radio button content switching



tachyon
06-19-2004, 07:29 PM
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.

Willy Duitt
06-20-2004, 09:15 AM
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.

Here is an example I had laying around:



<script type="text/javascript">
<!--//
function chkForm(form){
var subMenu = document.getElementById('subMenu');
if(form.main[1].checked){
form.subA[0].checked = false;
form.subA[1].checked = false;
subMenu.style.display = 'none';
} else{ subMenu.style.display = 'block' };
}

function validate(form){
if(!form.main[0].checked && !form.main[1].checked){
alert('You must choose either radio A or B');
return false;
}

if(form.main[0].checked && !form.subA[0].checked && !form.subA[1].checked){
alert('You must choose a Group A Submenu Button');
return false;
} else{ return true };
}
//-->
</script>
</head>

<body onload="document.getElementById('subMenu').style.display='none'">
Choose One:
<div><form method="get" action="" onsubmit="return validate(this)">
A: <input type="radio" name="main" value="A" onclick="chkForm(this.form)"><br>
<span id="subMenu" style="display:block">
&nbsp;&nbsp;A1: <input type="radio" name="subA" value="A1"><br>
&nbsp;&nbsp;A2: <input type="radio" name="subA" value="A2"><br>
</span>
B: <input type="radio" name="main" value="B" onclick="chkForm(this.form)"><br>
<input type="submit" value="Submit">
</form></div>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum