Hidden elements won't appear with onchange function defined in head

mrwireful9000

08-11-2008, 09:44 PM

I have four drop-down boxes, three of which are set to visibility:hidden. I need it so that when I select an option from the first box (the visible one), one of the next two boxes appears (depending on which option is picked) and when I pick an option in that box, the last box appears. One of the middle two boxes will still be hidden. However, when I change the first selection nothing happens. I would really appreciate if someone could help me out with this.
Thanks in advance!

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>

<style type="text/css">
div.c1 {visibility:hidden}
</style>
<script type="text/javascript">
function showL() {
var season = document.getElementById('season');
var lengthp = document.getElementById('lengthp');
var lengtho = document.getElementById('lengtho');
if (season.selectedIndex == '0') {
lengtho.style.visibility = "hidden";
lengthp.style.visibility = "hidden";
alert('showL 0');
}
if (season.selectedIndex == '1') {
lengthp.style.visibility = "visible";
alert('showL peak');
}
if (season.selectedIndex == '2') {
lengtho.style.visibility = "visible";
alert('showL off');
}
}
function showPp() {
var lengthp = document.getElementById('lengthp');
var pet = document.getElementById('pet');
if (lengthp.selectedIndex == '0') {
pet.style.visibility = "hidden";
}
if (lengthp.selectedIndex != '0') {
pet.style.visibility = "visible";
}
}
function showPo() {
var lengtho = document.getElementById('lengtho');
var pet = document.getElementById('pet');
if (lengtho.selectedIndex == '0') {
pet.style.visibility = "hidden";
}
if (lengtho.selectedIndex != '0') {
pet.style.visibility = "visible";
}
}
</script>
</head>
<body>

<div id="season">
<select name="season" onChange="showL();">
<option value="0">Select One</option>
<option value="peak">Peak Season</option>
<option value="off">Off Season</option>
</select>
</div>
<div id="lengthp" class="c1">
<select name="lengthp" onChange="showPp();">
<option value="0">Select One</option>
<option value="2">2 Days</option>
<option value="3">3 Days</option>
<option value="4">4 Days</option>
<option value="5">5 Days</option>
<option value="6">6 Days</option>
<option value="7">1 Week</option>
</select>
</div>
<div id="lengtho" class="c1">
<select name="lengtho" onChange="showPo();">
<option value="0">Select One</option>
<option value="2">2 Days</option>
<option value="3">3 Days</option>
<option value="4">4 Days</option>
<option value="5">5 Days</option>
<option value="6">6 Days</option>
<option value="7">1 Week</option>
</select>
</div>
<div id="pet" class="c1">
<select name="pet">
<option value="0">Select One</option>
<option value="no">No</option>
<option value="yes">Yes</option>
</select>
</div>
</body>
</html>

VIPStephan

08-11-2008, 10:20 PM

You should initialize your scripts on page load because currently it’s not “gettingElements”, it’s just not doing anything. The JS console in Firefox probably gives you errors onChange.

window.onload = function() {
// put your script(s) here
}

mrwireful9000

08-11-2008, 10:27 PM

Thanks, but I don't quite get where to put that. Also I didn't get any errors, forgot to say that. The js console doesn't do anything on that page. It's very weird.

VIPStephan

08-11-2008, 10:40 PM

Two options:

<script type="text/javascript">
window.onload = function() {
function showL() {
var season = document.getElementById('season');
var lengthp = document.getElementById('lengthp');
var lengtho = document.getElementById('lengtho');
if (season.selectedIndex == '0') {
lengtho.style.visibility = "hidden";
lengthp.style.visibility = "hidden";
alert('showL 0');
}
if (season.selectedIndex == '1') {
lengthp.style.visibility = "visible";
alert('showL peak');
}
if (season.selectedIndex == '2') {
lengtho.style.visibility = "visible";
alert('showL off');
}
}
function showPp() {
var lengthp = document.getElementById('lengthp');
var pet = document.getElementById('pet');
if (lengthp.selectedIndex == '0') {
pet.style.visibility = "hidden";
}
if (lengthp.selectedIndex != '0') {
pet.style.visibility = "visible";
}
}
function showPo() {
var lengtho = document.getElementById('lengtho');
var pet = document.getElementById('pet');
if (lengtho.selectedIndex == '0') {
pet.style.visibility = "hidden";
}
if (lengtho.selectedIndex != '0') {
pet.style.visibility = "visible";
}
}
}
</script>

<script type="text/javascript">
function showL() {
var season = document.getElementById('season');
var lengthp = document.getElementById('lengthp');
var lengtho = document.getElementById('lengtho');
if (season.selectedIndex == '0') {
lengtho.style.visibility = "hidden";
lengthp.style.visibility = "hidden";
alert('showL 0');
}
if (season.selectedIndex == '1') {
lengthp.style.visibility = "visible";
alert('showL peak');
}
if (season.selectedIndex == '2') {
lengtho.style.visibility = "visible";
alert('showL off');
}
}
function showPp() {
var lengthp = document.getElementById('lengthp');
var pet = document.getElementById('pet');
if (lengthp.selectedIndex == '0') {
pet.style.visibility = "hidden";
}
if (lengthp.selectedIndex != '0') {
pet.style.visibility = "visible";
}
}
function showPo() {
var lengtho = document.getElementById('lengtho');
var pet = document.getElementById('pet');
if (lengtho.selectedIndex == '0') {
pet.style.visibility = "hidden";
}
if (lengtho.selectedIndex != '0') {
pet.style.visibility = "visible";
}
window.onload = function() {
showL();
showPp();
showPo();
}
</script>

mrwireful9000

08-12-2008, 12:23 AM

Oh I understand it now, but I just realized that the selectedIndex was referring to the div and not the select. I fixed it by using a form instead of a div and doing it like this: document.formname.selectname.selectedIndex and removing the variables from getElementById. Thanks so much for your help, you made it possible for me to see my mistake!