Div tag is display depending on what radio button is selected

Hello,

I have a form with two radio buttons.  If they select button one then div 1 will appear below.  If they select radio button two then Div 2 is displayed.  I'd like to do this in JavaScript. I think the problem with the code I have below is that it's checking for checkboxes not radio buttons.  Is that right?

Thansk!
:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:

	

<!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>
<title>Third Santor</title>
<script>
function toggle(flag){
  var div1 = document.getElementById('divTxt1');
  var div2 = document.getElementById('divTxt2');
  if(div1){
    div1.style.display = flag?'block':'none';
  }
  if(div2){
    div2.style.display = flag?'block':'none';
  }
}
</script>
</head>
<body>
<form name="form1" method="post" action="" onsubmit="return ">
  <input type="checkbox" name="chk1" id="chk1" checked="checked" onclick="toggle(this.checked);" /><br /><br />
  <div id="divTxt1">Yes<input type="radio" name="txt1" id="txt1" value="Yes" /></div>
  <div id="divTxt2">No<input type="radio" name="txt2" id="txt2" value="No" /></div>
</form>
</body>
</html>

Open in new window

IRHuskerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

theremonCommented:
Hi there

check the code below - I kept your code as intact as it could be.
There are two main changes though that I made in order for it to work:
1. change the 2nd radiobutton's name to txt1 because it needs to be the same with radio1 in order to work
2. added  onclick="toggle(this.selected);" on each radio
<!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>
<title>Third Santor</title>
<script>
function toggle(flag){
  var div1 = document.getElementById('divTxt1');
  var div2 = document.getElementById('divTxt2');
  if(div1){
    div1.style.display = flag?'block':'none';
  }
  if(div2){
    div2.style.display = flag?'block':'none';
  }
}
</script>
</head>
<body>
<form name="form1" method="post" action="" onsubmit="return ">
  <input type="checkbox" name="chk1" id="chk1" checked="checked" onclick="toggle(this.checked);" /><br /><br />
  <div id="divTxt1">Yes<input type="radio" name="txt1" id="txt1" value="Yes"  onclick="toggle(this.selected);"/></div>
  <div id="divTxt2">No<input type="radio" name="txt1" id="txt2" value="No"  onclick="toggle(this.selected);"/></div>
</form>
</body>
</html>

Open in new window

0
theremonCommented:
One question - the code you provided and I altered, does not do what you describe in your question. That code hides the unselected div & radio. Which of the two things do you want to do? Have both radiouttons and show an extra div? Or hide the other option upon selection?
0
IRHuskerAuthor Commented:
Thanks for your help!

I'll better describe what I meant.

Users will select one of two radio buttons indicating if they are a US citizen or not.  Is the click Yes then below it in a DIV I would provide a texfield for their SS# and if no then show the DIV that has a text field for passport#.  Nothing would show until they selected one of the radio buttons.

Thanks!
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

theremonCommented:
OK give me a couple of mins - your code above will be changed quite a bit :)
0
theremonCommented:
Check the code below. I opted to almost re-write the code, in order to follow a more simple approach so that it will be easier to understand:
<html>
<head>
<title>EE Test file - Question: 25484024 </title>
<script>
function toggle(val, flag)
	{
	var div1 = document.getElementById('ssno');
	var div2 = document.getElementById('pass');
	if (val==1)
		{
		div1.style.display = 'block';
		div2.style.display = 'none';
		}
	else
		{
		div1.style.display = 'none';
		div2.style.display = 'block';
		}
	}
</script>
</head>

<body>
<input type="radio" id="usc1" name="uscitizen" value="1" onclick="toggle(this.value, this.checked);" /><label for="usc1">Yes</label>
<input type="radio" id="usc2" name="uscitizen" value="2" onclick="toggle(this.value, this.checked);" /><label for="usc2">No</label>
<div id="ssno" style="display:none">
Social Security No: <input type="text" />
</div>
<div id="pass" style="display:none">
Passport No: <input type="text" />
</div>
</body>
</html>

Open in new window

0
theremonCommented:
Actually just realized that there is some redundant code in there (namely the second parameter of the function). Forgot to delete it before posting. Here's the cleaned up code.
<html>
<head>
<title>EE Test file - Question: 25484024 </title>
<script>
function toggle(val)
	{
	var div1 = document.getElementById('ssno');
	var div2 = document.getElementById('pass');
	if (val==1)
		{
		div1.style.display = 'block';
		div2.style.display = 'none';
		}
	else
		{
		div1.style.display = 'none';
		div2.style.display = 'block';
		}
	}
</script>
</head>

<body>
<input type="radio" id="usc1" name="uscitizen" value="1" onclick="toggle(this.value);" /><label for="usc1">Yes</label>
<input type="radio" id="usc2" name="uscitizen" value="2" onclick="toggle(this.value);" /><label for="usc2">No</label>
<div id="ssno" style="display:none">
Social Security No: <input type="text" />
</div>
<div id="pass" style="display:none">
Passport No: <input type="text" />
</div>
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
IRHuskerAuthor Commented:
Perfect, THANKS!!!!!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.