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
    Jan 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Revealing Hidden Div via Drop-Down & Search Button

    Hi all,

    Only recently started, self-teaching, html and Java in order to get a project idea of mine up and running.

    First barrier I've come across is trying to sort out a drop down with search button that will then reveal the connected hidden div, I've mangled together some code from a couple of sources with what I've learnt, but not really sure how to tie in the "Search" button to the showDiv(divname) function. Wondering if anyone could help out.

    Many thanks in advance

    Code:
    <head>
    
    	<title>Untitled</title>
    	<link rel="stylesheet" type="text/css" href="stylesheet.css" />
    	
    	<script type="text/javascript"><!--
    
    var lastDiv = "";
    function showDiv(divname) {
    	
    	if (lastDiv) {
    		document.getElementById(lastDiv).className = "hiddenDiv";
    	}
    
    	if (divName && document.getElementById(divName)) {
    		document.getElementById(divName).className = "visibleDiv";
    		lastDiv = divName;
    	}
    }
    </script>
    
    </head>
    
    <body>
    	
    <h1>
    	<form name="form" >
    		<select name="select">
    		<option selected>Choose
    		<option value="one"> one
    		<option value="two"> two
    		<option value="other"> other
    		</select>
    
    		<input type="button" value="Search" onClick="showDiv(this.value)">
    	</form>	
    </h1></br>
    
    <h2>
    	Results:
    	<p id="one" class="hiddenDiv">one</p>
    	<p id="two" class="hiddenDiv">two</p>
    	<p id="other" class="hiddenDiv">other</p>
    </h2>
    
    </body>
    
    </html>
    From my stylesheet:

    Code:
    .hiddenDiv {
    	display: none;
    }
    
    .visibleDiv {
    	display: block;
    }
    Last edited by Kilgannon; 01-23-2012 at 04:54 PM. Reason: Resolved

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Code:
    <form name="myform" >
    <select name="myselect" onchange = "show()">
    <option value = 0> Choose a div to show</option>
    <option value = 1> One</option>
    <option value = 2> Two </option>
    <option value = 3> Three</option>
    </select>
    <br><br>
    <div id = "div1" style="display:none">
    Content of the div No.1 in here
    </div>
    <div id = "div2" style="display:none">
    Content of the div No.2 in here
    </div>
    <div id = "div3" style="display:none">
    Content of the div No.3 in here
    </div>
    </form>
    
    
    <script type = "text/javascript">
    function show() {
    document.getElementById("div1").style.display="none";
    document.getElementById("div2").style.display="none";
    document.getElementById("div3").style.display="none";
    var val = document.myform.myselect.value;
    if (val > 0) {
    var nd = "div" + val;
    document.getElementById(nd).style.display="block";
    }
    }
    
    </script>
    Suggest you do not name your form "form" and your select list "select".
    There is no need for a buttton - trigger the script by onchange in the select list.
    You must close your options with </option>
    The first option in a select list is selected by default.


    He lied like an eye-witness. - Russian proverb
    Last edited by Philip M; 01-23-2012 at 03:32 PM.

    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.

  • Users who have thanked Philip M for this post:

    Kilgannon (01-23-2012)

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,330
    Thanks
    23
    Thanked 616 Times in 615 Posts
    Just to beat a dead horse a little, javascript is case sensitive so the divname in
    function showDiv(divname) {
    is not the same as in
    document.getElementById(divName).className = "visibleDiv";
    or
    lastDiv = divName;

  • #4
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for the help; regards to the name of form and select, just had those like that for the purposes of the example.

    *divName amended
    *</option> added

    Is there a benefit to setting the style within the html rather than in the css stylesheet?

    And, for the purposes of educating myself, if it were to work via a button how would it look? Don't worry about it too much, just curious.

    Thanks again for help from you both.

  • #5
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Don't worry figured out how to attach to button as an onclick event, thanks again.


  •  

    Posting Permissions

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