...

View Full Version : onchange problem



magikeys
08-26-2011, 11:41 PM
I'm trying to figure out how to call multiple functions within the same onchange attribute, associated in the same select object. I have a drop-down menu in which I can select MN, WI, and Other. I've worked it now so that when I select MN, a new drop-down menu appears in which I can select one of MN's Counties. I want to be able to do the same with WI and Other, but my code is only calling MN. Here it is:


<html>
<head>
<script="text/javascript">
function showMN(select)
{
select.form.MN.value=""; // reset the text box value
document.getElementById("MNBox").style.display =
select.value == "MN" ? "inline" : "none";
}

function showWI(select)
{
select.form.WI.value=""; // reset the text box value
document.getElementById("WIBox").style.display =
select.value == "WI" ? "inline" : "none";
}

function showOther(select)
{
select.form.otherState.value = ""; // reset the text box value
document.getElementById("otherBox").style.display =
select.value == "Other" ? "inline" : "none";

</script>
</head>
<body>

<select name="state" onchange="showMN(this);showWI(this);showOther(this)">
<option value="" selected="selected">Choose...</option>
<option value="MN">MN</option>
<option value="WI">WI</option>
<option value="Other">Other</option>
</select><font color="red">*</font>

<span id="MNBox" style="display:none">
County: <select name="MN">
<option value="" selected="selected">Choose...</option>
<option value="List of MN Counties">List of MN Counties</option> </select><font color="red">*</font>

<span id="WIBox" style="display:none">
County: <select name="WI">
<option value="" selected="selected">Choose...</option>
<option value="List of WI Counties">List of WI Counties</option>
</select><font color="red">*</font>

<span id="otherBox" style="display:none">
<input type="text" name="otherState" placeholder="Enter state here"/><font color="red">*</font> <input type="text" name="otherCounty" placeholder="Enter County here"</span>

</body>
</html>

Am I even close?

Old Pedant
08-26-2011, 11:58 PM
> Am I even close.

No. Not really.

Your HTML isn't even legal: You are missing the /> on the name="otherCounty".

And I hope you know that placeholder= isn't available in many browsers.

Back in a bit.

Old Pedant
08-27-2011, 12:16 AM
And you were missing two </span>s and and and...



<html>
<head>
<script type="text/javascript">
function stateChanged(select)
{
var form = select.form;
// reset all text box values, just in case:
form.MN.value = form.WI.value = "";
form.otherState.value = "State";
form.otherCounty.value = "County";

// and hide all the "boxes", ditto:
document.getElementById("MNBox").style.display =
document.getElementById("WIBox").style.display =
document.getElementById("OtherBox").style.display = "none";

// and then show only the chosen box (if any):
if ( select.selectedIndex != 0 )
{
document.getElementById(select.value + "Box").style.display = "inline";
}
}
</script>
</head>
<body>
<form>
<select name="state" onchange="stateChanged(this)">
<option value="" selected="selected">Choose...</option>
<option value="MN">MN</option>
<option value="WI">WI</option>
<option value="Other">Other</option>
</select>
<font color="red">*</font>

<span id="MNBox" style="display:none">
County: <select name="MN">
<option value="" selected="selected">Choose...</option>
<option value="List of MN Counties">List of MN Counties</option>

</select>
<font color="red">*</font>
</span>

<span id="WIBox" style="display:none">
County: <select name="WI">
<option value="" selected="selected">Choose...</option>
<option value="List of WI Counties">List of WI Counties</option>
</select>
<font color="red">*</font>
</span>

<span id="OtherBox" style="display:none">
<input type="text" name="otherState" placeholder="Enter state here" value="State"
onfocus="if(this.value=='State') this.value='';"
onblur="if(this.value=='') this.value='State';" />
<font color="red">*</font>
<input type="text" name="otherCounty" placeholder="Enter County here" value="County"
onfocus="if(this.value=='County') this.value='';"
onblur="if(this.value=='') this.value='County';" />
</span>
</form>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum