Web Analytics Made Easy -
StatCounter onchange problem - CodingForum

Announcement

Collapse
No announcement yet.

onchange problem

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • 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?

  • #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

      Working...
      X