SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Radio Button/Panel Usage

    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!
    Last edited by Mittineague; Mar 2, 2011 at 21:34. Reason: Please keep personal info private

  2. #2
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •