asked on

Show/Hide image or content based on form drop down choice

I have the need to create a small form with a select box with three choices. Choice 1, choice 2 choice3.

Choice 1 shows content in a specified area and hides choice 2,3 , Choice 2 Hides Choice 1 and 3 and shows choice 2, Choice 3 shows Choice three content and hides choice 1 and 2.

Hope this makes sense. I have come close but my content keeps overlapping when the choices are changing.

<html>
<head>
      <title>Untitled</title>
</head>

<body>
<form name="form1" method="post" action="">
<div id="Layer1" style="position:absolute; left:200px; top:150px; width:455px; height:131px; z-index:1; visibility: hidden">
Content 1 </div>
<div id="Layer2" style="position:absolute; left:200px; top:150px; width:454px; height:134px; z-index:2; visibility: hidden">
Content 2</div>
<div id="Layer3" style="position:absolute; left:200px; top:150px; width:454px; height:134px; z-index:3; visibility: hidden">
Content 3 </div>

<p> </p>
<p>
<select name="type" onchange="Javascript:chklayer(this.value);">
<option value="0">Please Select:</option>
<option value="1">Add a Report</option>
<option value="2">Manage a Report</option>
       <option value="3">File Upload snd Report Usage</option>
</select>
</p>
<p> </p>
<p> </p>
</form>
            <script language="JavaScript">

function chklayer(v) {

if (v == "0") {
document.getElementById(layershow).style.visibility = 'hidden';
document.getElementById(layerhide).style.visibility = 'hidden';
return false;
} else if (v == "1") {
layershow = "layer1";
layerhide = "layer2";
              layerhide = "layer3";

} else if (v == "2") {
layerhide = "layer1";
              layershow = "layer2";
layerhide = "layer3";

} else if (v == "3") {
layershow = "layer3";
            layerhide = "layer1";
              layerhide = "layer2";

}
document.getElementById(layershow).style.visibility = 'visible';
document.getElementById(layerhide).style.visibility = 'hidden';
}
</script>
</body>
</html>

What is wrong? Thanks!

SOLUTION

Pravin Asar

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Pravin Asar

Please take this one... I noticed the bug in previous post

<html>
<head>
<title>Select and Hide</title>
</head>

<body>
<html>
<head>
<title>Untitled</title>
</head>

<body>
<script language="javascript">
function chklayer(v) {
var layerObjs = new Array();
var dispStatus = new Array();
for (ix=1; ix < 4; ix++) {
layerObjs[ix-1] = document.getElementById('Layer'+ix);
dispStatus[ix-1] = 'hidden';
}
if (v > 0 && v < 4) {
dispStatus[parseInt(v)-1] = 'visible';
}
for (ix=0; ix < 3; ix++) {
layerObjs[ix].style.visibility = dispStatus[ix];
}
if (v == "0") {
return false;
}
return true;
}
</script>
<form name="form1" method="post" action="">
<div id="Layer1" style="position:absolute; left:200px; top:150px; width:455px; height:131px; z-index:1; visibility: hidden">
Content 1 </div>
<div id="Layer2" style="position:absolute; left:200px; top:150px; width:454px; height:134px; z-index:2; visibility: hidden">
Content 2</div>
<div id="Layer3" style="position:absolute; left:200px; top:150px; width:454px; height:134px; z-index:3; visibility: hidden">
Content 3 </div>

<p> </p>
<p>
<select name="type" onchange="Javascript:chklayer(this.value);">
<option value="0">Please Select:</option>
<option value="1">Add a Report</option>
<option value="2">Manage a Report</option>
<option value="3">File Upload snd Report Usage</option>
</select>
</p>
<p> </p>
<p> </p>
</form>

</body>
</html>

ASKER CERTIFIED SOLUTION

Zvonko

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

mrslate1

ASKER

I will go through these and give the awards on Monday. Thanks a ton!

mrslate1

ASKER

I split the points as the Reduction in code is always benificial, but the answer by pravinasar was quick and precise. Thanks to both. I really appreciate the help!

Zvonko

You are welcome.