Hiding/Showing Radio Buttons 1

palbc06 · Mar 19, 2006

Hello everyone,
I have the following code. This is basically to show a different set of radio buttons, each time the user selects a different option in the drop down.

The code works when I refresh the page before selecting a different option in the drop down. If I select a different option without refreshing the page then it does not show me any Radio Buttons.

What I want is to show Radio Buttons associated with "Yes" when it is selected from the drop down. But if I switch the option to "No", it should take away the Radio Buttons for "Yes" and only show the Radio Buttons for "No".

Thank you for your help.
Pal

--------------------------------------------------------

Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>New Page 1</title>
<script type="text/javascript"> 

function funcCalc(s)
{
if(s == 1)
{
obj = document.getElementById('group2').style; 
(obj.display == 'none')? obj.display = 'block' : obj.display = 'none'; 
if (document.getElementById('group3').style.visibility="visible")
document.getElementById('group3').style.visibility="hidden"
if (document.getElementById('group5').style.visibility="visible")
document.getElementById('group5').style.visibility="hidden"
}

if(s == 2)
{
obj = document.getElementById('group3').style; 
(obj.display == 'none')? obj.display = 'block' : obj.display = 'none'; 
if (document.getElementById('group2').style.visibility="visible")
document.getElementById('group2').style.visibility="hidden"
if (document.getElementById('group5').style.visibility="visible")
document.getElementById('group5').style.visibility="hidden"
}

if(s == 3)
{
obj = document.getElementById('group5').style; 
(obj.display == 'none')? obj.display = 'block' : obj.display = 'none'; 
if (document.getElementById('group2').style.visibility="visible")
document.getElementById('group2').style.visibility="hidden"
if (document.getElementById('group3').style.visibility="visible")
document.getElementById('group3').style.visibility="hidden"
}
}
</script> 
</head>

<body>

<form id="form1" name="form1" method="post" action=""> 
Calculations: 
<SELECT NAME="First"
onChange="funcCalc(this.selectedIndex)" size ="1" style="font-size: 8pt; font-family:Arial color:000080; font-weight:bold">
<OPTION VALUE="N/A">--- Does application use calculations ?--
<OPTION VALUE="Yes"> Yes
<OPTION VALUE="No"> No
<OPTIOn VALUE="Not Sure"> Not Sure
</SELECT>
<br>
  <p id="group2" style="display: none;"> 
    <label> 
    <input type="radio" name="RadioGroup2" value="radio" /> 
Radio99</label> 
    <br /> 
    <label> 
    <input type="radio" name="RadioGroup2" value="radio" /> 
Radio99</label> 

    <br /> 
    
<p id="group3" style="display: none;"> 
    <label> 
    <input type="radio" name="RadioGroup3" value="radio" /> 
Radio100</label> 
    <br /> 
    <label> 
    <input type="radio" name="RadioGroup3" value="radio" /> 
Radio100</label> 

    <br /> 

<p id="group5" style="display: none;"> 
    <label> 
    <input type="radio" name="RadioGroup5" value="radio" /> 
Radio102</label> 
    <br /> 
    <label> 
    <input type="radio" name="RadioGroup5" value="radio" /> 
Radio102</label> 

    <br /> 

</p> 
</form> 

</body>

</html>

trollacious · Mar 19, 2006

Get rid of the inner if statements. You're setting the visibility to hidden, so even if you set the display to block, the elements are still hidden. You never change any elements to visible then. Change to the following and see what happens.

Code:

function funcCalc(s)
{
var obj;
if(s == 1)
  {
  obj = document.getElementById('group2').style; 
  (obj.display == 'none')? obj.display = 'block' : obj.display = 'none';
 
  document.getElementById('group3').style.display = 'none';
  document.getElementById('group5').style.display = 'none';
  }

if(s == 2)
  {
  obj = document.getElementById('group3').style; 
  (obj.display == 'none')? obj.display = 'block' : obj.display = 'none'; 
  
  document.getElementById('group2').style.display = 'none';
  document.getElementById('group5').style.display = 'none';
  }

if(s == 3)
  {
  obj = document.getElementById('group5').style; 
  (obj.display == 'none')? obj.display = 'block' : obj.display = 'none'; 
  document.getElementById('group2').style.display = 'none';
  document.getElementById('group3').style.display = 'none';
  }
}

Lee

palbc06 · Mar 20, 2006

Lee,

Thank you very much for your reply.
I was getting confused with that part.

Had one more question for you.

If I have a Submit Button at the end of the code, it shows only if I select the last option in the drop down.

Any thoughts ??

Thanks
Pal

trollacious · Mar 20, 2006

You didn't show the submit button in your original code, but I'd guess you have it inside the <p> tag that contains the last set of radio buttons. Take it out of those tags and it should display fine.

Lee

palbc06 · Mar 27, 2006

Lee,
Thank you very much.

Pallavi

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!

Hiding/Showing Radio Buttons 1

palbc06

MIS

trollacious

Programmer

palbc06

MIS

trollacious

Programmer

palbc06

MIS

Similar threads

Part and Inventory Search

Sponsor