Resolved Revealing Hidden Div via Drop-Down & Search Button [Archive]

...

View Full Version : Resolved Revealing Hidden Div via Drop-Down & Search Button

Kilgannon

01-23-2012, 12:52 PM

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

<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:

.hiddenDiv {
display: none;
}

.visibleDiv {
display: block;
}

Philip M

01-23-2012, 03:19 PM

<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

sunfighter

01-23-2012, 04:11 PM

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;

Kilgannon

01-23-2012, 04:19 PM

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.

Kilgannon

01-23-2012, 04:54 PM

Don't worry figured out how to attach to button as an onclick event, thanks again.