Radio Button/Panel Usage

**pspunlimited** · Mar 2, 2011 20:05

can someone tell me how to do this things using asp.net

http://earth.google.com/support/bin/...&answer=117452

Scenario
1. If i click the radio button it will go to the divtags/panels that i want to show. what you see in the website is what i want in my website. clicking the radio button will pop below the next questions, and if answered will pop up again another set of questions..

if you have a code please post it here or send it to <snip/>

thank you!

**AllanP** · Mar 6, 2011 01:38

Here is a way to do it. The script collects all the divs with class name "hide" for later display or hide. The clearAll() function removes unwanted divs, depending on their level in the tree. I have used in-line handlers so that you can see what is happening on each line of the script.

Code :

<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 
<head>
<meta http-equiv="Content-Language" content="en-au">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Radio Button Divs</title>
<script type="text/javascript">
<!--
var allDivs, allHides=new Array(), lastCheckedObj=null; // global
//
// level=0 means clear 1st & 2nd level "hide" divs
// level=2 means clear 2nd level "hide" divs only
 function clearAll(level)
  { var i;
    for( i=0; i<allHides.length; i++)
      { if(level==0)
         { allHides[i].style.display="none"; }
        else if(level==2)
         { if(allHides[i].id.substr(0,2)=="a2")
            { allHides[i].style.display="none"; }
          } } }
// ------------    
 function getOption(obj,level)
  { // save lastChecked object
    if(lastCheckedObj && lastCheckedObj.substr(1,1)>2){ document.getElementById(lastCheckedObj).checked=false;}
    lastCheckedObj=obj.id;
    var divSelected="a"+level+"-"+obj.value;
    var elem=document.getElementById(divSelected);
    elem.style.display="block";
    currentPanelObj=elem;
  }
// -----------------
window.onload= function() {
  // gather all "hide" divs
    allDivs=document.getElementsByTagName("div")
    var i;
    for( i=0;i<allDivs.length; i++)
      { if(allDivs[i].className.substr(0,4)=="hide"){ allHides[allHides.length]=allDivs[i]; }
      } }
// -------------------------------
//-->
</script>
<style type="text/css">
<!--
body   { font-family:arial, helvetica, sans-serif; font-size:13px; color:#000; margin-top:3px; margin-left:0px; text-align:left; }
p      { margin-top:0px; margin-bottom:5px; }
#wrap  { position:relative; top:0px; left:0px; width:300px; text-align:left; overflow:hidden; margin-left:20px; }
.gen   { display:none; float:left; width:250px; height:100px; margin-top:10px; border:1px solid #000; text-align:left; }
.a16B  { font-size:16px; color:#F00; }
 
-->
</style>
</head>
 
<body>
 
<div id="wrap">
  <form name="myForm" method="get" action="a110305_2.htm">
    <p class="a">Select one of the options below</p>
    <p>
    <input id="a1" type="radio" name="myRadio" value="1" onclick="clearAll(0); getOption(this,1)"> 
    This is the first option (a1-1)</p>
    <p>
    <input id="a2" type="radio" name="myRadio" value="2" onclick="clearAll(0); getOption(this,1)"> 
    This is the second option (a1-2)</p>
    <div id="a1-1" class="hide gen">
      <p class="a"><b>This is a1-1</b></p>
      <p>
      <input id="a3" type="radio" name="myRadio1" value="1" onclick="clearAll(2); getOption(this,2)"> 
      This is the first sub-option (a2-1)</p>
      <p>
      <input id="a4" type="radio" name="myRadio1" value="2" onclick="clearAll(2); getOption(this,2)"> 
      This is the second sub-option (a2-2)</div>
    <!-- end a1-1 -->
    <div id="a1-2" class="hide gen">
      <p class="a16B"><b>This is a1-2</b></p>
      <p>
      <input id="a5" type="radio" name="myRadio2" value="1" onclick="clearAll(2); getOption(this,2)"> 
      This is the first sub-option (a2-1)</p>
      <p>
      <input id="a6" type="radio" name="myRadio2" value="2" onclick="clearAll(2); getOption(this,2)"> 
      This is the second sub-option&nbsp; (a2-2)</div>
    <!-- end a1-2 -->
    <div id="a2-1" class="hide gen">
      <p class="a"><b>This is a2-1</b></div>
    <!-- end a2-1 -->
    <div id="a2-2" class="hide gen">
      <p class="a16B"><b>This is a2-2</b></div>
    <!-- end a2-2 -->
  </form>
  <!-- end form -->
</div>
<!-- end wrap -->
 
</body>
 
</html>

User Tag List

Thread: Radio Button/Panel Usage

Thread Tools

Display

Radio Button/Panel Usage

Bookmarks

Bookmarks

Posting Permissions