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 9 of 9
  1. #1
    Senior Coder
    Join Date
    Apr 2010
    Posts
    1,453
    Thanks
    71
    Thanked 102 Times in 101 Posts

    Simple javascript help needed

    I have a page with options, and I need to hide options unless a certain choice is selected.

    So say you have a select box for male and female, if they select male, I need it to show male options, and if they select female, it shows female options.

    How can I hide things until selected and then show the textboxes and stuff?

    Thank you!

  • #2
    Senior Coder DJCMBear's Avatar
    Join Date
    Mar 2010
    Location
    United Kindom
    Posts
    1,173
    Thanks
    14
    Thanked 136 Times in 136 Posts
    Try searching on Google for "javascript show and hide" as there is loads of codes out there which do this.
    Official BinPress hand picked coder.
    For anyone worried about SQL injection go have a look at my small yet powerful script here.
    Go Pledge for Light Table, if it hit's $300,000 Python and other languages will get added.
    I am 1 of 65,608 people to get a Pebble Watch :P

  • #3
    Senior Coder
    Join Date
    Apr 2010
    Posts
    1,453
    Thanks
    71
    Thanked 102 Times in 101 Posts
    Thanks, I didn't know the name to look for.

  • #4
    Senior Coder
    Join Date
    Apr 2010
    Posts
    1,453
    Thanks
    71
    Thanked 102 Times in 101 Posts
    I just looked at at least a dozen websites about it, and none were helpful. Like click a text link to hide or show, or hide all check boxes, but couldn't find the one I need.

  • #5
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Consider this ...

    Can you modify this to your needs? ...

    Edited link: http://javascript.internet.com/forms...down-list.html

    If not, describe problem further please.
    Last edited by jmrker; 12-05-2010 at 03:58 AM.

  • #6
    Senior Coder
    Join Date
    Apr 2010
    Posts
    1,453
    Thanks
    71
    Thanked 102 Times in 101 Posts
    That is an image map. So wouldn't work.

    What I am talking about is a select box with options, lets say nothing else is displayed on the page.

    You click it and choose an option, and then it shows a bunch of options after clicking an option on the select box.

    So like

    SELECT
    MALE
    FEMALE

    //Hidden (value male) shown if selected male
    Sex: Male
    Name: <input type="text" name="malename">
    <input type="submit" name="submit" value="Submit Info">

    //Hidden (value female) shown if selected female
    Sex: Female
    Name: <input type="text" name="femalename">
    <input type="submit" name="submit" value="Submit Info">

  • #7
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    Sorry ... posted incorrect link. (Working on too many projects at the same time )

    See corrected link in post #5 above.

    Quick example of usage below...
    Code:
    <html>
    <head>
    <title>Male / Female Information</title>
    <script type="text/javascript">
    // From: http://www.codingforums.com/showthread.php?p=1023768#post1023768
    
    function ShowReg(op) {
      document.getElementById('Male').style.display='none';
      document.getElementById('Female').style.display='none';
      switch (op) {
        case 1 : document.getElementById('Male').style.display="block"; break;
        case 2 : document.getElementById('Female').style.display="block"; break;
        default : break;
      }
    }
    </script>
    </head>
    
    <body>
    <select id="choice" onChange="ShowReg(this.selectedIndex)">
      <option value='0'>Choose</option>
      <option value="1">Male</option>
      <option value="2">Female</option>
    </select>
    <p>
    <div id="Male" style="display:none">
      Male: <input type="text" id="maleInfo" value="">
    </div>
    <div id="Female" style="display:none">
      Female: <input type="text" id="femaleInfo" value="">
    </div>
    </body>
    </html>
    Last edited by jmrker; 12-05-2010 at 04:08 AM.

  • Users who have thanked jmrker for this post:

    myfayt (12-05-2010)

  • #8
    Senior Coder
    Join Date
    Apr 2010
    Posts
    1,453
    Thanks
    71
    Thanked 102 Times in 101 Posts
    Seems to be working so far, thank you!

  • #9
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Arrow

    Quote Originally Posted by myfayt View Post
    Seems to be working so far, thank you!
    What do you expect to go wrong?????

    Anyway, you're most welcome.
    Happy to help.
    Good Luck!


  •  

    Posting Permissions

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