Results 1 to 3 of 3

Thread: Show/Hide with Radio Buttons in a form.

  1. #1
    Join Date
    Nov 2007
    Posts
    35
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default Show/Hide with Radio Buttons in a form.

    I'm looking for something similar to the Form Dependency Manager

    http://dynamicdrive.com/dynamicindex...dependency.htm

    I'm looking to create a form similar to this, but when a radio button is clicked I'd like it to display "correct" or "incorrect" next to the button.

    I'd tried editing this script to suit my needs, but this script does much more than I need it to. Is there a similar script in DD? or does anyone know of a different script on a different site?

  2. #2
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    Use jQuery. It's very simple to do this with it.

    Example.

  3. #3
    Join Date
    Nov 2007
    Posts
    35
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    Thanks, that doesn't quite help me. I'm a noob.

    I did find this . . . which I can modify to work for me.

    Code:
    <html>
    <head>
    <title>RB Tabs</title>
    <style type="text/CSS">
    div.RBtnTab { display:none; height:100px; width:200px; background-color:yellow}
    </style>
    <script type="text/javascript">
    // getElementByClass function from http://www.webmasterworld.com/forum91/1729.htm
    //Create an array
      var allPageTags = new Array();
    
      function doSomethingWithClasses(theClass) {
    //Populate the array with all the page tags
        var allPageTags=document.getElementsByTagName("*");
    //Cycle through the tags using a for loop
        for (var i=0; i<allPageTags.length; i++) {
    //Pick out the tags with our class name
          if (allPageTags[i].className==theClass) {
    //Manipulate this in whatever way you want
            allPageTags[i].style.display='none';
          }
        }
      }
    
    function Show(ids) {
      doSomethingWithClasses('RBtnTab');
    
      var obj = document.getElementById(ids);
      if (obj.style.display != 'block') { obj.style.display = 'block'; }
                                   else { obj.style.display = 'none'; }
    }
    </script>
    </head>
    <body>
    
    <label for="lDIV1">
    <input id="lDIV1" type="radio" name='rbtab' value='DIV1' onClick="Show('DIV1')">Event Info</label>
    <label for="lDIV2">
    <input id="lDIV2" type="radio" name='rbtab' value='DIV2' onClick="Show('DIV2')">Plan Event</label>
    <label for="lDIV3">
    <input id="lDIV3" type="radio" name='rbtab' value='DIV3' onClick="Show('DIV3')">Contact Us</label>
    <div id='Content' style="display:block"><br />
    <div id='DIV1' class="RBtnTab">Event Information</div>
    <div id='DIV2' class="RBtnTab">Plan Event Information</div>
    <div id='DIV3' class="RBtnTab">Contact us at: xxx</div>
    </div>
    </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
  •