...

View Full Version : NEED HELP PLEASE! (show/hide) Form Fields According To Dropdown Box Selection??



skanknpunx
02-29-2012, 08:20 PM
The Script works in Firefox, BUT not in Internet Explorer. What am I missing? I need Drop Down menu Boxes to appear when User clicks on a certian Menu option. The way it appears now on the website is all the boxes appear. They should stay "hidden" until a User clicks on the drop down menu selection. Thanks!

<head>
<script type="text/javascript" language="javascript">

function showInfo()
{
var typeOne = document.getElementById('bmp');
var typeTwo = document.getElementById('junction');
var typeThree = document.getElementById('mile');
if(document.basicform01.Location_Type.value == "BMP to EMP")
{
typeOne.style.display="inline";
typeTwo.style.display="none";
typeThree.style.display="none";
}
else if(document.basicform01.Location_Type.value == "Junction to Junction")
{
typeOne.style.display="none";
typeTwo.style.display="inline";
typeThree.style.display="none";
}
else if(document.basicform01.Location_Type.value == "Milepost")
{
typeOne.style.display="none";
typeTwo.style.display="none";
typeThree.style.display="inline";
}
else
{
typeOne.style.display="none";
typeTwo.style.display="none";
typeThree.style.display="none";
}
}

</script>



<style>*[style] {outline:none}</style>


</head>

<body>
<fieldset>
<dl>
<dt><label for="Location_Type">Location Type *</label></dt>
<dd><select class="inputselect" name="Location_Type" id="Location_Type" onchange="showInfo()">
<option value="" selected="selected">Select One...</option>
<option value="BMP to EMP">BMP to EMP</option>
<option value="Junction to Junction">Junction to Junction</option>
<option value="Milepost">Milepost</option>
</select></dd>
<div id="bmp" style="display:none;">
<dt><label for="bmpDetails">BMP</label></dt>
<dd><input class="inputtext" type="text" name="bmpDetails" id="bmpDetails" /></dd>
<dt><label for="empDetails">EMP</label></dt>
<dd><input class="inputtext" type="text" name="empDetails" id="empDetails" /></dd>
</div>
<div id="junction" style="display:none;">
<dt><label for="fromJunction">From Junction:</label></dt>
<dd><input class="inputtext" type="text" name="fromJunction" id="fromJunction" /></dd>
<dt><label for="toJunction">To Junction:</label></dt>
<dd><input class="inputtext" type="text" name="toJunction" id="toJunction" /></dd>
</div>
<div id="mile" style="display:none;">
<dt><label for="milepostNum">Milepost</label></dt>
<dd><input class="inputtext" type="text" name="milepostNum" id="milepostNum" /></dd>
</div>
<p>
</dl>
<p>
</fieldset>

</body>

Philip M
02-29-2012, 08:48 PM
if(document.basicform01.Location_Type.value == "BMP to EMP")

i do not see any form named basicform1.

DanInMa
02-29-2012, 08:57 PM
the main part of your issue was a bad HTML structure.

since it looks liek you cuts this out from part of a page, I had to add a few elements to test properly, but here you go:

Also I invesigated by inserting your code into htmltidy online (http://infohound.net/tidy/tidy.pl) which found that you had improperly closed a dl block among some other minor issues.


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

<html>
<head>
<script type="text/javascript">

function showInfo()
{
var typeOne = document.getElementById('bmp');
var typeTwo = document.getElementById('junction');
var typeThree = document.getElementById('mile');
var loc_type_val = document.basicform01.Location_Type.value;

if(loc_type_val == "BMP to EMP")
{
typeOne.style.display="inline";
typeTwo.style.display="none";
typeThree.style.display="none";
}
else if(loc_type_val == "Junction to Junction")
{
typeOne.style.display="none";
typeTwo.style.display="inline";
typeThree.style.display="none";
}
else if(loc_type_val == "Milepost")
{
typeOne.style.display="none";
typeTwo.style.display="none";
typeThree.style.display="inline";
}
else
{
typeOne.style.display="none";
typeTwo.style.display="none";
typeThree.style.display="none";
}
}

</script>
<style type="text/css">
*[style] {outline:none}
</style>

<title></title>
</head>

<body>
<form name="basicform01" id="basicform01">
<fieldset>
<dl>
<dt><label for="Location_Type">Location Type *</label></dt>

<dd><select class="inputselect" name="Location_Type" id="Location_Type" onchange=
"showInfo()">
<option value="" selected="selected">
Select One...
</option>

<option value="BMP to EMP">
BMP to EMP
</option>

<option value="Junction to Junction">
Junction to Junction
</option>

<option value="Milepost">
Milepost
</option>
</select></dd>

<dd>
<div id="bmp" style="display:none;">
<dl>
<dt><label for="bmpDetails">BMP</label></dt>

<dd><input class="inputtext" type="text" name="bmpDetails" id=
"bmpDetails"></dd>

<dt><label for="empDetails">EMP</label></dt>

<dd><input class="inputtext" type="text" name="empDetails" id=
"empDetails"></dd>
</dl>
</div>

<div id="junction" style="display:none;">
<dl>
<dt><label for="fromJunction">From Junction:</label></dt>

<dd><input class="inputtext" type="text" name="fromJunction" id=
"fromJunction"></dd>

<dt><label for="toJunction">To Junction:</label></dt>

<dd><input class="inputtext" type="text" name="toJunction" id=
"toJunction"></dd>
</dl>
</div>

<div id="mile" style="display:none;">
<dl>
<dt><label for="milepostNum">Milepost</label></dt>

<dd><input class="inputtext" type="text" name="milepostNum" id=
"milepostNum"></dd>
</dl>
</div>
</dd>
</dl>
</fieldset>
</form>
</body>
</html>

skanknpunx
02-29-2012, 10:27 PM
Got it Fixed! thanks everyone.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum