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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Aug 2008
    Location
    under my desk
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Hidden elements won't appear with onchange function defined in head

    I have four drop-down boxes, three of which are set to visibility:hidden. I need it so that when I select an option from the first box (the visible one), one of the next two boxes appears (depending on which option is picked) and when I pick an option in that box, the last box appears. One of the middle two boxes will still be hidden. However, when I change the first selection nothing happens. I would really appreciate if someone could help me out with this.
    Thanks in advance!

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
        <head>
            <title></title>
    
            <style type="text/css">
                div.c1 {visibility:hidden}
            </style>
            <script type="text/javascript">
                function showL() {
                    var season = document.getElementById('season');
                    var lengthp = document.getElementById('lengthp');
                    var lengtho = document.getElementById('lengtho');
                    if (season.selectedIndex == '0') {
                       lengtho.style.visibility = "hidden";
                       lengthp.style.visibility = "hidden";
                       alert('showL 0');
                    }
                    if (season.selectedIndex == '1') {
                       lengthp.style.visibility = "visible";
                       alert('showL peak');
                    }
                    if (season.selectedIndex == '2') {
                       lengtho.style.visibility = "visible";
                       alert('showL off');
                    }
                }
                function showPp() {
                    var lengthp = document.getElementById('lengthp');
                    var pet = document.getElementById('pet');
                    if (lengthp.selectedIndex == '0') {
                       pet.style.visibility = "hidden";
                    }
                    if (lengthp.selectedIndex != '0') {
                       pet.style.visibility = "visible";
                    }
                }
                function showPo() {
                    var lengtho = document.getElementById('lengtho');
                    var pet = document.getElementById('pet');
                    if (lengtho.selectedIndex == '0') {
                       pet.style.visibility = "hidden";
                    }
                    if (lengtho.selectedIndex != '0') {
                       pet.style.visibility = "visible";
                    }
                }
            </script>
        </head>
        <body>
    
            <div id="season">
                <select name="season" onChange="showL();">
                    <option value="0">Select One</option>
                    <option value="peak">Peak Season</option>
                    <option value="off">Off Season</option>
                </select>
            </div>
            <div id="lengthp" class="c1">
                <select name="lengthp" onChange="showPp();">
                    <option value="0">Select One</option>
                    <option value="2">2 Days</option>
                    <option value="3">3 Days</option>
                    <option value="4">4 Days</option>
                    <option value="5">5 Days</option>
                    <option value="6">6 Days</option>
                    <option value="7">1 Week</option>
                </select>
            </div>
            <div id="lengtho" class="c1">
                <select name="lengtho" onChange="showPo();">
                    <option value="0">Select One</option>
                    <option value="2">2 Days</option>
                    <option value="3">3 Days</option>
                    <option value="4">4 Days</option>
                    <option value="5">5 Days</option>
                    <option value="6">6 Days</option>
                    <option value="7">1 Week</option>
                </select>
            </div>
            <div id="pet" class="c1">
                <select name="pet">
                    <option value="0">Select One</option>
                    <option value="no">No</option>
                    <option value="yes">Yes</option>
                </select>
            </div>
        </body>
    </html>

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,930
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    You should initialize your scripts on page load because currently it’s not “gettingElements”, it’s just not doing anything. The JS console in Firefox probably gives you errors onChange.

    Code:
    window.onload = function() {
    // put your script(s) here
    }

  • #3
    New to the CF scene
    Join Date
    Aug 2008
    Location
    under my desk
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks, but I don't quite get where to put that. Also I didn't get any errors, forgot to say that. The js console doesn't do anything on that page. It's very weird.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,930
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    Two options:
    1. Code:
      <script type="text/javascript">
      window.onload = function() {
                  function showL() {
                      var season = document.getElementById('season');
                      var lengthp = document.getElementById('lengthp');
                      var lengtho = document.getElementById('lengtho');
                      if (season.selectedIndex == '0') {
                         lengtho.style.visibility = "hidden";
                         lengthp.style.visibility = "hidden";
                         alert('showL 0');
                      }
                      if (season.selectedIndex == '1') {
                         lengthp.style.visibility = "visible";
                         alert('showL peak');
                      }
                      if (season.selectedIndex == '2') {
                         lengtho.style.visibility = "visible";
                         alert('showL off');
                      }
                  }
                  function showPp() {
                      var lengthp = document.getElementById('lengthp');
                      var pet = document.getElementById('pet');
                      if (lengthp.selectedIndex == '0') {
                         pet.style.visibility = "hidden";
                      }
                      if (lengthp.selectedIndex != '0') {
                         pet.style.visibility = "visible";
                      }
                  }
                  function showPo() {
                      var lengtho = document.getElementById('lengtho');
                      var pet = document.getElementById('pet');
                      if (lengtho.selectedIndex == '0') {
                         pet.style.visibility = "hidden";
                      }
                      if (lengtho.selectedIndex != '0') {
                         pet.style.visibility = "visible";
                      }
                  }
      }
              </script>
    2. Code:
      <script type="text/javascript">
                  function showL() {
                      var season = document.getElementById('season');
                      var lengthp = document.getElementById('lengthp');
                      var lengtho = document.getElementById('lengtho');
                      if (season.selectedIndex == '0') {
                         lengtho.style.visibility = "hidden";
                         lengthp.style.visibility = "hidden";
                         alert('showL 0');
                      }
                      if (season.selectedIndex == '1') {
                         lengthp.style.visibility = "visible";
                         alert('showL peak');
                      }
                      if (season.selectedIndex == '2') {
                         lengtho.style.visibility = "visible";
                         alert('showL off');
                      }
                  }
                  function showPp() {
                      var lengthp = document.getElementById('lengthp');
                      var pet = document.getElementById('pet');
                      if (lengthp.selectedIndex == '0') {
                         pet.style.visibility = "hidden";
                      }
                      if (lengthp.selectedIndex != '0') {
                         pet.style.visibility = "visible";
                      }
                  }
                  function showPo() {
                      var lengtho = document.getElementById('lengtho');
                      var pet = document.getElementById('pet');
                      if (lengtho.selectedIndex == '0') {
                         pet.style.visibility = "hidden";
                      }
                      if (lengtho.selectedIndex != '0') {
                         pet.style.visibility = "visible";
                      }
      window.onload = function() {
                  showL();
                  showPp();
                  showPo();
      }
      </script>

  • #5
    New to the CF scene
    Join Date
    Aug 2008
    Location
    under my desk
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Oh I understand it now, but I just realized that the selectedIndex was referring to the div and not the select. I fixed it by using a form instead of a div and doing it like this: document.formname.selectname.selectedIndex and removing the variables from getElementById. Thanks so much for your help, you made it possible for me to see my mistake!


  •  

    Posting Permissions

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