dcsimg
www.webdeveloper.com
Results 1 to 2 of 2

Thread: Need Help With City State Zip Dropdown List Code

  1. #1
    Join Date
    Apr 2011
    Posts
    2

    Post Need Help With City State Zip Dropdown List Code

    Hi guys I saw this code at http://javascript.internet.com/forms...down-list.html and wanted to expand on it by adding a Zip Code field. The problem is it doesn't want to work for me and I don't know what I'm doing wrong. My source code is below.

    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

    <script type="text/javascript" src="countryStateCity.js"></script>
    </head>

    <body>

    <fieldset style="width: 230px;">
    <legend><strong>Make your selection</strong></legend>
    <p>
    <form name="test" method="POST" action="processingpage.php">
    <table>
    <tr>
    <td style="text-align: left;">Country:</td>
    <td style="text-align: left;">
    <select name="country" id="country" onchange="setStates();">
    <option value="Canada">Canada</option>
    <option value="Mexico">Mexico</option>
    <option value="United States">United States</option>
    </select>
    </td>
    </tr><tr>
    <td style="text-align: left;">State:</td>
    <td style="text-align: left;">
    <select name="state" id="state" onchange="setCities();">
    <option value="">Please select a Country</option>
    </select>
    </td>
    </tr><tr>
    <td style="text-align: left;">City:</td>
    <td style="text-align: left;">
    <select name="city" id="city" onchange="setZips();">
    <option value="">Please select a Country</option>
    </select>
    </td>
    </tr>
    <tr>
    <td style="text-align: left;">Zip:</td>
    <td style="text-align: left;"><select name="zip" id="zip">
    <option value="">Please select a Zip</option>
    </select></td>
    </tr>
    </table>
    </form>
    </fieldset>

    </body>
    </html>
    // Java Document

    // State lists
    var states = new Array();

    states['Canada'] = new Array('Alberta','British Columbia','Ontario');
    states['Mexico'] = new Array('Baja California','Chihuahua','Jalisco');
    states['United States'] = new Array('California','Florida','New York');


    // City lists
    var cities = new Array();

    cities['Canada'] = new Array();
    cities['Canada']['Alberta'] = new Array('Edmonton','Calgary');
    cities['Canada']['British Columbia'] = new Array('Victoria','Vancouver');
    cities['Canada']['Ontario'] = new Array('Toronto','Hamilton');

    cities['Mexico'] = new Array();
    cities['Mexico']['Baja California'] = new Array('Tijauna','Mexicali');
    cities['Mexico']['Chihuahua'] = new Array('Ciudad Juárez','Chihuahua');
    cities['Mexico']['Jalisco'] = new Array('Guadalajara','Chapala');

    cities['United States'] = new Array();
    cities['United States']['California'] = new Array('Los Angeles','San Francisco');
    cities['United States']['Florida'] = new Array('Miami','Orlando');
    cities['United States']['New York'] = new Array('Buffalo','new York');

    //Zip lists
    var zips = new Array();

    zips['New York'] = new Array();
    zips['New York']['Buffalo'] = new Array('32587','98757');
    zips['New York']['new York'] = new Array('32587','98757');



    function setStates() {
    cntrySel = document.getElementById('country');
    stateList = states[cntrySel.value];
    changeSelect('state', stateList, stateList);
    setCities();
    }

    function setCities() {
    cntrySel = document.getElementById('country');
    stateSel = document.getElementById('state');
    cityList = cities[cntrySel.value][stateSel.value];
    changeSelect('city', cityList, cityList);
    }


    function setZips() {
    stateSel = document.getElementById('state');
    citySel = document.getElementById('city');
    zipList = zips[stateSel.value][citySel.value];
    changeSelect('zip', zipList, zipList);
    }

    function changeSelect(fieldID, newOptions, newValues) {
    selectField = document.getElementById(fieldID);
    selectField.options.length = 0;
    for (i=0; i<newOptions.length; i++) {
    selectField.options[selectField.length] = new Option(newOptions[i], newValues[i]);
    }
    }

    // Multiple onload function created by: Simon Willison
    // http://simonwillison.net/2004/May/26/addLoadEvent/
    function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
    window.onload = func;
    } else {
    window.onload = function() {
    if (oldonload) {
    oldonload();
    }
    func();
    }
    }
    }

    addLoadEvent(function() {
    setStates();
    });

  2. #2
    Join Date
    Apr 2011
    Posts
    2
    Quote Originally Posted by dwaynex View Post
    Hi guys I saw this code at http://javascript.internet.com/forms...down-list.html and wanted to expand on it by adding a Zip Code field. The problem is it doesn't want to work for me and I don't know what I'm doing wrong. My source code is below.
    Here is what I got so far http://www.tnrealestatedeals.com/test2.php

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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