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!

Register Log in
  • Congratulations Rhinorhino on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Show/Hide DIVs on radio button selection 2

Status
Not open for further replies.
Diggum1

Diggum1

Programmer
Joined
Oct 14, 2004
Messages
67
Location
US
Does anyone know how to show/hide layers based on a radio button selection? For example, I have a Question followed by two radio buttons, Yes and No. If they select Yes, a DIV should appear underneath the Question (this DIV is filled with checkboes). If they select No, nothing happens, or the DIV hides (if is was open). All DIVs should initially be hidden.

I found the following, but it only shows the top row of the DIV. I would also think that the DIV itself should have the ID, not the table or rows.

Any ideas? Below is the code.

Thanks
Dig
---------------------------------------------------------

<html>
<head>

<script type="text/JavaScript" >

<!--
function showlayer(theTable)
{
if (document.getElementById(theTable).style.display == 'none')
{
document.getElementById(theTable).style.display = 'block';
}
}
//-->

<!--
function hidelayer(theTable)
{
if (document.getElementById(theTable).style.display == 'none')
{
document.getElementById(theTable).style.display = 'none';
}
else
{
document.getElementById(theTable).style.display = 'none';
}
}
//-->
</script>
</head>

<body>
<table width="824" border="0" cellpadding="2" cellspacing="0" bordercolor="#DFDFDF" bgcolor="#CCCCCC" >
<tr width="100%">
<td><b>Do you have pets?</b></td>
</tr>
<tr width="100%">
<td>
<input type="radio" name="pctype" value="layer" onFocus="showlayer('layer');return true;"/>
<span class="linkswhite">Yes</span>

<input type="radio" name="pctype" value="desktop" onFocus="hidelayer('layer');return false;"/>
<span class="linkswhite">No</span></td>


</tr>
</table>

<br>
<div class="options">
<table width="825" border="0" cellpadding="0" cellspacing="0">

<tr id="layer" style="display: none;">
<td width="72" class="linkswhite"><input type="checkbox" name="checkbox" value="checkbox">
Yes </td>
<td width="79" class="linkswhite"><input type="checkbox" name="checkbox2" value="checkbox">
No</td>
<td width="674">Are you interested in purchasing dog food? </td>
</tr>
<tr id="layer" style="display: none;">
<td class="linkswhite"><input type="checkbox" name="checkbox" value="checkbox">
Yes </td>
<td class="linkswhite"><input type="checkbox" name="checkbox2" value="checkbox">
No</td>
<td>Are you interested in purchasing cat food? </td>
</tr>
</table>
</div>



</body>
</html>

 
Sort by date Sort by votes
This should get you going in the right direction:

Code: 
<html>
<head>
	<script type="text/javascript">
	<!--
		function showlayer(whichLayer) {
			document.getElementById(whichLayer).style.display = 'block';
		}

		function hidelayer(whichLayer) {
			document.getElementById(whichLayer).style.display = 'none';
		}
	//-->
	</script>
</head>

<body>
	Do you have pets?<br />
	<input type="radio" name="petYN" value="y" onFocus="showlayer('petsLayer');return true;" />Yes
	<input type="radio" name="petYN" value="n" onFocus="hidelayer('petsLayer');return false;" />No

	<div id="petsLayer" style="display:none;">
		Put all your pet related questions in here
	</div>

	<br /><br />

	Do you have a car?<br />
	<input type="radio" name="carYN" value="y" onFocus="showlayer('carLayer');return true;" />Yes
	<input type="radio" name="carYN" value="n" onFocus="hidelayer('carLayer');return false;" />No

	<div id="carLayer" style="display:none;">
		Put all your car related questions in here
	</div>

	<br /><br />

	Do you have a job?<br />
	<input type="radio" name="jobYN" value="y" onFocus="showlayer('jobLayer');return true;" />Yes
	<input type="radio" name="jobYN" value="n" onFocus="hidelayer('jobLayer');return false;" />No

	<div id="jobLayer" style="display:none;">
		Put all your job related questions in here
	</div>

</body>
</html>

Hope this helps,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Works like a charm.

Thanks!
 
Upvote 0 Downvote
Actually, I have another thought. Can I modify the
function hidelayer(whichLayer) so that it will uncheck all checkboxes in that DIV?

Thanks again.
 
Upvote 0 Downvote
Sorry, I'm not exactly sure how. What would I add to the following to clear all checkboxes and radio buttons.


function hidelayer(theTable)
{
if (document.getElementById(theTable).style.display == 'none')
{document.getElementById(theTable).style.display = 'none';}
else
{document.getElementById(theTable).style.display = 'none';}
}


Thanks so much!
 
Upvote 0 Downvote
Try this as an alternative.

Code: 
function hidelayer(whichLayer) {
	document.getElementById(whichLayer).style.display = 'none';
	var CBs = document.getElementById(whichLayer).getElementsByTagName('input');
	for (var loop=0; loop<CBs.length; loop++) {
		if (CBs[loop].type.toLowerCase() == 'checkbox') CBs[loop].checked = false;
	}	
}

I'm not sure why you reverted to posting your first hidelayer function instead of the one I gave you, since mine removed redundant code... but hey - there you go.

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
you would add something like this:

Code: 
var d = document.getElementById(theTable);
var e = d.getElementsByTagName("input");

for ( var i = 0; i < e.length; i++ ) {
    if( e[i].type == "checkbox" || e[i].type == "radio" )
        e[i].checked = false;
}



*cLFlaVA
----------------------------
[tt]( <P> <B>)13 * (<P> <.</B>)[/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
Billy, I am actually using your code...I just copied from the wrong test page :)

There may be radio buttons in the hidden DIV as well. So, just in case a user changes their mind and selects No, I want the DIV to hide AND clear any radio/checkboxes so no vlaues are submitted.

Thanks guys
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Kennelbloke
  • Locked
  • Question Question
Can't Get Markers to show on Map
Replies
0
Views
1K
Kennelbloke
Kennelbloke
TheLazyPig
  • Locked
  • Question Question
Buttons not aligned after another button is clicked
Replies
2
Views
681
gmmastros
gmmastros
malpa
  • Locked
  • Question Question
Graph the selection of a html table row
Replies
0
Views
1K
malpa
malpa
berkshirea
  • Locked
  • Question Question
Radio Button Clicked, Another Radio Becomes Mandatory
Replies
2
Views
868
berkshirea
berkshirea
jomat
  • Locked
  • Question Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
1K
xwb
xwb

Part and Inventory Search

Sponsor

Back
Top