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
    Feb 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    NEED HELP PLEASE! (show/hide) Form Fields According To Dropdown Box Selection??

    The Script works in Firefox, BUT not in Internet Explorer. What am I missing? I need Drop Down menu Boxes to appear when User clicks on a certian Menu option. The way it appears now on the website is all the boxes appear. They should stay "hidden" until a User clicks on the drop down menu selection. Thanks!

    <head>
    <script type="text/javascript" language="javascript">

    function showInfo()
    {
    var typeOne = document.getElementById('bmp');
    var typeTwo = document.getElementById('junction');
    var typeThree = document.getElementById('mile');
    if(document.basicform01.Location_Type.value == "BMP to EMP")
    {
    typeOne.style.display="inline";
    typeTwo.style.display="none";
    typeThree.style.display="none";
    }
    else if(document.basicform01.Location_Type.value == "Junction to Junction")
    {
    typeOne.style.display="none";
    typeTwo.style.display="inline";
    typeThree.style.display="none";
    }
    else if(document.basicform01.Location_Type.value == "Milepost")
    {
    typeOne.style.display="none";
    typeTwo.style.display="none";
    typeThree.style.display="inline";
    }
    else
    {
    typeOne.style.display="none";
    typeTwo.style.display="none";
    typeThree.style.display="none";
    }
    }

    </script>



    <style>*[style] {outline:none}</style>


    </head>

    <body>
    <fieldset>
    <dl>
    <dt><label for="Location_Type">Location Type *</label></dt>
    <dd><select class="inputselect" name="Location_Type" id="Location_Type" onchange="showInfo()">
    <option value="" selected="selected">Select One...</option>
    <option value="BMP to EMP">BMP to EMP</option>
    <option value="Junction to Junction">Junction to Junction</option>
    <option value="Milepost">Milepost</option>
    </select></dd>
    <div id="bmp" style="display:none;">
    <dt><label for="bmpDetails">BMP</label></dt>
    <dd><input class="inputtext" type="text" name="bmpDetails" id="bmpDetails" /></dd>
    <dt><label for="empDetails">EMP</label></dt>
    <dd><input class="inputtext" type="text" name="empDetails" id="empDetails" /></dd>
    </div>
    <div id="junction" style="display:none;">
    <dt><label for="fromJunction">From Junction:</label></dt>
    <dd><input class="inputtext" type="text" name="fromJunction" id="fromJunction" /></dd>
    <dt><label for="toJunction">To Junction:</label></dt>
    <dd><input class="inputtext" type="text" name="toJunction" id="toJunction" /></dd>
    </div>
    <div id="mile" style="display:none;">
    <dt><label for="milepostNum">Milepost</label></dt>
    <dd><input class="inputtext" type="text" name="milepostNum" id="milepostNum" /></dd>
    </div>
    <p>
    </dl>
    <p>
    </fieldset>

    </body>
    Last edited by skanknpunx; 02-29-2012 at 08:30 PM.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    if(document.basicform01.Location_Type.value == "BMP to EMP")

    i do not see any form named basicform1.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    the main part of your issue was a bad HTML structure.

    since it looks liek you cuts this out from part of a page, I had to add a few elements to test properly, but here you go:

    Also I invesigated by inserting your code into htmltidy online (http://infohound.net/tidy/tidy.pl) which found that you had improperly closed a dl block among some other minor issues.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    <head>
      <script type="text/javascript">
    
      function showInfo()
      {
      var typeOne = document.getElementById('bmp');
      var typeTwo = document.getElementById('junction');
      var typeThree = document.getElementById('mile');
     var loc_type_val = document.basicform01.Location_Type.value;
    
      if(loc_type_val  == "BMP to EMP")
      {
      typeOne.style.display="inline";
      typeTwo.style.display="none";
      typeThree.style.display="none";
      }
      else if(loc_type_val == "Junction to Junction")
      {
      typeOne.style.display="none";
      typeTwo.style.display="inline";
      typeThree.style.display="none";
      }
      else if(loc_type_val  == "Milepost")
      {
      typeOne.style.display="none";
      typeTwo.style.display="none";
      typeThree.style.display="inline";
      }
      else
      {
      typeOne.style.display="none";
      typeTwo.style.display="none";
      typeThree.style.display="none";
      }
      }
    
      </script>
      <style type="text/css">
    *[style] {outline:none}
      </style>
    
      <title></title>
    </head>
    
    <body>
      <form name="basicform01" id="basicform01">
        <fieldset>
          <dl>
            <dt><label for="Location_Type">Location Type *</label></dt>
    
            <dd><select class="inputselect" name="Location_Type" id="Location_Type" onchange=
            "showInfo()">
              <option value="" selected="selected">
                Select One...
              </option>
    
              <option value="BMP to EMP">
                BMP to EMP
              </option>
    
              <option value="Junction to Junction">
                Junction to Junction
              </option>
    
              <option value="Milepost">
                Milepost
              </option>
            </select></dd>
    
            <dd>
              <div id="bmp" style="display:none;">
                <dl>
                  <dt><label for="bmpDetails">BMP</label></dt>
    
                  <dd><input class="inputtext" type="text" name="bmpDetails" id=
                  "bmpDetails"></dd>
    
                  <dt><label for="empDetails">EMP</label></dt>
    
                  <dd><input class="inputtext" type="text" name="empDetails" id=
                  "empDetails"></dd>
                </dl>
              </div>
    
              <div id="junction" style="display:none;">
                <dl>
                  <dt><label for="fromJunction">From Junction:</label></dt>
    
                  <dd><input class="inputtext" type="text" name="fromJunction" id=
                  "fromJunction"></dd>
    
                  <dt><label for="toJunction">To Junction:</label></dt>
    
                  <dd><input class="inputtext" type="text" name="toJunction" id=
                  "toJunction"></dd>
                </dl>
              </div>
    
              <div id="mile" style="display:none;">
                <dl>
                  <dt><label for="milepostNum">Milepost</label></dt>
    
                  <dd><input class="inputtext" type="text" name="milepostNum" id=
                  "milepostNum"></dd>
                </dl>
              </div>
            </dd>
          </dl>
        </fieldset>
      </form>
    </body>
    </html>
    Last edited by DanInMa; 02-29-2012 at 08:59 PM.

  • #4
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Got it Fixed! thanks everyone.


  •  

    Posting Permissions

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