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?

[Webinar] Streamline your web hosting managementRegister Today

x
 
theremonConnect With a Mentor Commented:
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
 
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
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
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
 
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
 
IRHuskerAuthor Commented:
Perfect, THANKS!!!!!
0
All Courses

From novice to tech pro — start learning today.