www.webdeveloper.com
Results 1 to 6 of 6

Thread: Onchange with select tag(dropdown box)

  1. #1
    Join Date
    Nov 2006
    Posts
    213

    Onchange with select tag(dropdown box)

    Gang,

    I am using the OnChange event with the drop down box populated with countries.....but only works when certain countries are chosen.

    When a country is chosen the OnChange event fires, passing a variable to the same page using the location.href.

    Once this is done the onload within the body tag calls the function SetFocus() to the First Name text box.....which does not always work either.

    Here is the code:

    Code:
    function CountrySelected() 
         {
            if (document.form.Country.value == "United States")
    		{
    		 location.href="web address?Country=United States";
    		} 
    		if (document.form.Country.value == "Romania")
    		{
    		 location.href="web address?Country=Romania";
    		}
    		if (document.form.Country.value == "Sweden")
    		{
    		 location.href="web address?Country=Sweden";
    		}
    		if (document.form.Country.value == "Czech Republic")
    		{
    		 location.href="web address?Country=Czech Republic";
    		}
    		if (document.form.Country.value == "France")
    		{
    		 location.href="web address?Country=France";
    		}
    		if (document.form.Country.value == "Germany")
    		{
    		 location.href="web address?Country=Germany";
    		}
    		if (document.form.Country.value == "Italy")
    		{
    		 location.href="web address?Country=Italy";
    		}
    		if (document.form.Country.value == "Poland")
    		{
    		 location.href="web address?Country=Poland";
    		}
    		if (document.form.Country.value == "Russia")
    		{
    		 location.href="web address?Country=Russia";
    		}
    		if (document.form.Country.value == "Spain")
    		{
    		 location.href="web address?Country=Spain";
    		}
    	}
    </script>
    HTML Code:
    <BODY onLoad="setFocus()" bgcolor="473c8b">
    HTML Code:
    <select NAME="Country" SIZE="1" onchange="CountrySelected(document.form.Country.value)">
    <option VALUE="<%=CountrySelected%>"><%=CountrySelected%>
    <option VALUE="Australia">Australia            
    <option VALUE="Austria">Austria
    <option VALUE="Belgium">Belgium
    <option VALUE="Bosnia & Herzegovina">Bosnia & Herzegovina
    <option VALUE="Bulgaria">Bulgaria
    <option VALUE="Canada">Canada
    <option VALUE="Croatia">Croatia
    <option VALUE="Czech Republic">Czech Republic
    <option VALUE="European Union">European Union
    <option VALUE="England">England
    <option VALUE="France">France
    <option VALUE="Germany">Germany
    <option VALUE="Greece">Greece
    <option VALUE="Hungary">Hungary
    <option VALUE="India">India
    <option VALUE="Ireland">Ireland
    <option VALUE="Italy">Italy
    <option VALUE="Japan">Japan
    <option VALUE="Kosovo">Kosovo
    <option VALUE="Latvia">Latvia
    <option VALUE="Lithuania">Lithuania
    <option VALUE="Luxembourg">Luxembourg
    <option VALUE="Macedonia">Macedonia
    <option VALUE="Mexico">Mexico
    <option VALUE="Namibia">Namibia
    <option VALUE="Netherlands">Netherlands
    <option VALUE="New Zealand">New Zealand
    <option VALUE="Poland">Poland
    <option VALUE="Portugal">Portugal
    <option VALUE="Romania">Romania
    <option VALUE="Russia">Russia
    <option VALUE="Serbia">Serbia
    <option VALUE="Scotland">Scotland
    <option VALUE="Slovakia">Slovakia
    <option VALUE="Slovenia">Slovenia
    <option VALUE="South Africa">South Africa
    <option VALUE="Spain">Spain
    <option VALUE="Sweden">Sweden
    <option VALUE="Switzerland">Switzerland
    <option VALUE="Turkey">Turkey
    <option VALUE="Ukraine">Ukraine
    <option VALUE="Wales">Wales
    <option VALUE="United States">United States
        	  </select>     
           </td>
          </tr>
    </form>      

  2. #2
    Join Date
    Apr 2006
    Location
    Perth
    Posts
    154
    The FORM object already contains the ability to load a page with the ? search variable
    you have created in the CountrySelected() function. I have used an action of "" so
    change the page to the current page. Not sure if this will work in all browsers. When in
    doubt insert your page address in the action attribute. Method="get" appends the form
    data to the URL.

    countryAry is created from the 'search' parameter of the URL by splitting it on the '='.
    So countryAry[0]="?Country" and countryAry[1]="Greece" (for example.)

    Scan the entire option list, when a match is found set that option as the currently
    selected option.

    Code:
    <html>
    <script type="text/javascript">
    
    function setFocus()
     { countryAry=location.search.split("=");
       selectObj=document.getElementById("countryList");
       for(i=0;i<selectObj.options.length;i++)
        if(selectObj.options[i].value==countryAry[1])
         selectObj.options.selectedIndex=i;
     };
    
    </script>
    
    <BODY onload="setFocus()" bgcolor="473c8b">
    
    <form action="" method="get">
    <select NAME="Country" id="countryList">
    <option VALUE="<&#37;=CountrySelected%>"><%=CountrySelected%>
    <option VALUE="Australia">Australia            
    <option VALUE="Austria">Austria
    <option VALUE="Belgium">Belgium
    <option VALUE="Bosnia & Herzegovina">Bosnia & Herzegovina
    <option VALUE="Bulgaria">Bulgaria
    <option VALUE="Canada">Canada
    <option VALUE="Croatia">Croatia
    <option VALUE="Czech Republic">Czech Republic
    <option VALUE="European Union">European Union
    <option VALUE="England">England
    <option VALUE="France">France
    <option VALUE="Germany">Germany
    <option VALUE="Greece">Greece
    <option VALUE="Hungary">Hungary
    <option VALUE="India">India
    <option VALUE="Ireland">Ireland
    <option VALUE="Italy">Italy
    <option VALUE="Japan">Japan
    <option VALUE="Kosovo">Kosovo
    <option VALUE="Latvia">Latvia
    <option VALUE="Lithuania">Lithuania
    <option VALUE="Luxembourg">Luxembourg
    <option VALUE="Macedonia">Macedonia
    <option VALUE="Mexico">Mexico
    <option VALUE="Namibia">Namibia
    <option VALUE="Netherlands">Netherlands
    <option VALUE="New Zealand">New Zealand
    <option VALUE="Poland">Poland
    <option VALUE="Portugal">Portugal
    <option VALUE="Romania">Romania
    <option VALUE="Russia">Russia
    <option VALUE="Serbia">Serbia
    <option VALUE="Scotland">Scotland
    <option VALUE="Slovakia">Slovakia
    <option VALUE="Slovenia">Slovenia
    <option VALUE="South Africa">South Africa
    <option VALUE="Spain">Spain
    <option VALUE="Sweden">Sweden
    <option VALUE="Switzerland">Switzerland
    <option VALUE="Turkey">Turkey
    <option VALUE="Ukraine">Ukraine
    <option VALUE="Wales">Wales
    <option VALUE="United States">United States
    </select>
    <br>
    <input type="Submit" value="Select">
    </form>      
    </html>
    Colin Fiat Simple Solutions To Complex Problems

  3. #3
    Join Date
    Apr 2006
    Location
    Perth
    Posts
    154
    oops, I think I made the same mistake you may have. "South Africa" is returned in the
    URL as South+Africa and therefore is not found in the OPTION list.

    Of course it would be easy to write a secondary parser and change any + to space but
    the OPTION object allows for hidden data in the VALUE attribute. So the easiest method
    would be:

    <option VALUE="SouthAfrica">South Africa

    Also, if you want to retain the onChange() immediacy, remove the submit button and change the SELECT tags to:

    <select NAME="Country" id="countryList" onchange="this.form.submit();">
    Colin Fiat Simple Solutions To Complex Problems

  4. #4
    Join Date
    Nov 2006
    Posts
    213
    The strange thing is when I choose Romania, Spain or few of the other countries the validation of the remaining text boxes does not work.........basically clicking on the "Register" button does nothing.
    But, when I choose the United States or Sweden the validation process works on the form when clicking on the "Register" button.

    By the way, the Select Box is nested within its own form tag.

  5. #5
    Join Date
    Nov 2006
    Posts
    213
    Problem Fixed......I put the setfocus() in the form and it works........seems the body tag was not working when a new country was chosen, resulting in a new form that would send data to the appropiate page based on the country chosen.

    Thank You for your help DracoMerest

  6. #6
    Join Date
    Nov 2007
    Location
    Hungary
    Posts
    42
    If I were you, I'd done it that way:
    http://www.java.xc.hu/OnchangeWithSelectCountry.html

    Code:
    <form name="form" action="" method="get">
    <script type="text/javascript" language="JavaScript"><!--
    document.write("<select NAME=\"Country\" id=\"Country\" SIZE=\"1\" style=\"width:160px;\" >"+"<"+"/"+"select>"+
    " <input type=\"submit\" value=\"get country code\">"+
    " &nbsp; Suggested code:<br><textarea id=\"el0\" cols=\"110\" rows=\"28\">"+"function body"+"<\/textarea>");
    document.close();
    //--></script>
    <noscript>This page needs JavaSript enabled</noscript>
    </form>
    Suggested code:
    Code:
    function makeSelect(selObj) { // cISOcode is a global array of { isoCode, countryName } pairs of strings
        var selCountries = new Array("US", "GB", "RU", "HU", "RO");
        if (selObj == null) {
            selObj = document.getElementById("Country");
        }
        if (selObj != null) {
            var i, j, opt, lsC;
            lsC = location.search.indexOf(selObj.name + "=");
            if (lsC > -1) {
                lsC = location.search.substr(lsC + selObj.name.length + 1, 2);
            } else {
                lsC = selCountries[0];
            }
            if (selCountries.indexOf(lsC) < 0) {
                selCountries[selCountries.length] = lsC;
            }
            for (i = selObj.options.length - 1; i >= 0; i--) {
                selObj.remove(i);
            }
            for (i = 0; i < selCountries.length; i++) {
                j = 0;
                while (j < cISOcode.length && selCountries[i] != cISOcode[j]) {
                    j = j + 2;
                }
                if (j < cISOcode.length) {
                    opt = document.createElement("option");
                    opt.value = cISOcode[j];
                    opt.title = cISOcode[j] + (" " + cISOcode[j + 1]);
                    try {
                        selObj.add(opt, null);
                    } catch (ex) {
                        selObj.add(opt);
                    }
                    selObj.options[selObj.options.length - 1].text = cISOcode[j + 1];
                }
            }
            for (i = 0; i < selObj.options.length; i++) {
                if (lsC == selObj.options[i].value) {
                    selObj.selectedIndex = i;
                }
            }
        }
    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles