Web Analytics Made Easy - StatCounter onchange problem - CodingForum

Announcement

Collapse
No announcement yet.

onchange problem

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    onchange problem

    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:

    Code:
    <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?
    Tags: None
  • #2
    > 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.
    Be yourself. No one else is as qualified.

    Comment

    • #3
      And you were missing two </span>s and and and...

      Code:
      <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>
      Be yourself. No one else is as qualified.

      Comment

      Previous template Next
      Working...
      X