Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 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
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,554
    Thanks
    80
    Thanked 4,620 Times in 4,583 Posts
    > 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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,554
    Thanks
    80
    Thanked 4,620 Times in 4,583 Posts
    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>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •