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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Mar 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript show hide divs onchange select menu

    Trying to get the divs to switch style properties when selected form select menu. Any help would be great!

    Code:
    <script type="text/javascript">
    function showstuff(element){
            if(document.getElementById(element).style.display = 'block')
                      {
                            document.getElementById(have).style.visibility="block";
                            document.getElementById(look).style.visibility="none";
                      }
            else if(document.getElementById(element).style.visibility = 'block')
                      {
                            document.getElementById(look).style.visibility="block";
                            document.getElementById(have).style.visibility="none";
                      }
    }
    </script>
    
    <select name="type" onchange="showstuff(this.value);">
              <option value="look">Look</option>
              <option value="have">Have</option>
    </select>
    <div id="have" style="display:block;">Have</div>
    <div id="look" style="display:none;">Look</div>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    29,232
    Thanks
    83
    Thanked 4,887 Times in 4,848 Posts
    Too complex.
    Code:
    <script type="text/javascript">
    function showstuff(element){
        document.getElementById("have").style.visibility = element=="have"?"block":"none";
        document.getElementById("look").style.visibility = element=="look"?"block":"none";
    }
    </script>
    
    <select name="type" onchange="showstuff(this.value);">
              <option value="look">Look</option>
              <option value="have" selected>Have</option>
    </select>
    <div id="have" style="display:block;">Have</div>
    <div id="look" style="display:none;">Look</div>
    Note that you were missing the "..." around "look" and "have" in document.getElementById.
    Be yourself. No one else is as qualified.

  • Users who have thanked Old Pedant for this post:

    low tech (03-18-2011)

  • #3
    New to the CF scene
    Join Date
    Mar 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey thanks for getting back to me. That still doesn't quite work, it just hides one div but doesnt open another.

  • #4
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    905
    Thanks
    177
    Thanked 104 Times in 104 Posts
    Hi

    change both 'visibility' to 'display'

    eg
    document.getElementById("have").style.visibility

    document.getElementById("have").style.display

    LT
    "be sure to code defensively"

  • #5
    New to the CF scene
    Join Date
    Mar 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Low Tech,

    Yeh i spotted that the first time, but still have the same issue.

    Any advice would be great.

    Thanks

  • #6
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    905
    Thanks
    177
    Thanked 104 Times in 104 Posts
    Hi

    No idea --- it works fine for me in IE8 and FireFox

    this is what I Have


    PHP Code:
    <!doctype html>
    <
    html>
    <
    head>
    <
    title>TEST TEMPLATE</title>
    </
    head>
    <
    body>
    <
    script type="text/javascript">
    function 
    showstuff(element){
        
    document.getElementById("have").style.display element=="have"?"block":"none";
        
    document.getElementById("look").style.display element=="look"?"block":"none";
    }
    </script>
    <select name="type" onchange="showstuff(this.value);">
              <option value="look">Look</option>
              <option value="have" selected>Have</option>
    </select>
    <div id="have" style="display:block;">Have</div>
    <div id="look" style="display:none;">Look</div>
    </body>
    </html> 
    LT
    "be sure to code defensively"

  • #7
    New to the CF scene
    Join Date
    Mar 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    works great thanks low tech.

  • #8
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    905
    Thanks
    177
    Thanked 104 Times in 104 Posts
    Hi

    Glad it's working for you:-)

    Actually it's Old Pedant's code and thanks should be credited to him which i've done via the 'thank user for this helpful post' button.

    LT
    "be sure to code defensively"


  •  

    Posting Permissions

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