Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Help with hiding div tags based on radio selection

    I am new to JavaScript and realize that I'm probably just missing something simple. I have two radio buttons and I want a a certain div tag to display based on which button is selected. I've cut out the extra coding and made a very basic example of what I'm trying to do. If you could be of any help I would greatly appreciate it.

    The error that I'm getting is stating that "document.form.techspecsub" is either null or not an object.


    Code:
    <script type="text/javascript">
    
    function showhide_areabldgreq() 
    {
       if (document.form.techspecsub[0].checked) 
          {
          document.getElementById("areabldg").style.display = "inline";
          }
       else 
          { 
          document.getElementById("areabldg").style.display = "none";
          } 
    
       if (document.form.techspecsub[1].checked) 
          {
          document.getElementById("reqpo").style.display = "inline";
          }
       else 
          { 
          document.getElementById("reqpo").style.display = "none";
          } 
    }
    
    </script>
    
    
    
    <form>
    <input name="techspecsub" value="Enter Area" type="radio" 
    onClick="showhide_areabldgreq()" />Enter Area<br>
    
    <input name="techspecsub" value="Enter Requisition" type="radio" 
    onClick="showhide_areabldgreq()"  />Enter Requisition
    </form>
    
    <div id="areabldg" style="display:none">I'm Area</div><br>
    <div id="reqpo" style="display:none">I'm Req PO</div>

  • #2
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Add highlighted:
    Code:
       if (document.forms[0].techspecsub[0].checked) 
          {
          document.getElementById("areabldg").style.display = "inline";
          }
       else 
          { 
          document.getElementById("areabldg").style.display = "none";
          } 
    
       if (document.forms[0].techspecsub[1].checked) 
          {
          document.getElementById("reqpo").style.display = "inline";
          }
       else 
          { 
          document.getElementById("reqpo").style.display = "none";
          }
    Hope that helps.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • Users who have thanked rangana for this post:

    bowlinbd (08-20-2008)

  • #3
    New Coder
    Join Date
    Aug 2008
    Posts
    60
    Thanks
    6
    Thanked 6 Times in 6 Posts
    Set the radio buttons to have values and change one of their names...
    Code:
    <input type="radio" value="YOURVALUE" name="techspecsub"><input type="radio" value="YOURVALUE" name="techspecsubb">
    Then change Your javascript to check for the value...
    Code:
    <script type="text/javascript">
    
    function showhide_areabldgreq() 
    {
       if (document.form.techspecsub.value="YOURVALUE") 
          {
          document.getElementById("areabldg").style.display = "inline";
          }
       else 
          { 
          document.getElementById("areabldg").style.display = "none";
          } 
    
       if (document.form.techspecsubb.value="YOURVALUE") 
          {
          document.getElementById("reqpo").style.display = "inline";
          }
       else 
          { 
          document.getElementById("reqpo").style.display = "none";
          } 
    }
    
    </script>
    That Should Work

  • #4
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Both solutions worked perfectly. Thank you very much.


  •  

    Posting Permissions

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