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 2 of 2
  1. #1
    Regular Coder
    Join Date
    May 2007
    Posts
    130
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Question auto-populate html selects (country/state) not working?

    Eya!

    I've been trying to implement this function for some time now but im having no luck getting it to work.

    basically, as many of you have seen before im sure, its a system where the user selects their country and the state field automatically updates to that countries states.

    the issue: basically, its not loading the JS at all. all i get are 2 blank html slects.

    Heres my .JS file code:
    Code:
    var postState = '';
    var postCountry = '';
    
    // State table
    var state = '\
    US:AK:Alaska|\
    US:AL:Alabama|\
    US:AR:Arkansas|\
    
    ===================================|
    ... CODE SHORTENED TO SAVE SPACE....|
    .....REST OF STATES LISTED HERE.....|
    ===================================|
    
    ';
    
    // Country data table
    var country = '\
    AF:Afghanistan|\
    AL:Albania|\
    DZ:Algeria|\
    
    ===================================|
    .... CODE SHORTENED TO SAVE SPACE...|
    .....REST OF COUNTRIES LISTED HERE....|
    ===================================|
    
    ';
    
    function TrimString(sInString) {
      if ( sInString ) {
        sInString = sInString.replace( /^\s+/g, "" );// strip leading
        return sInString.replace( /\s+$/g, "" );// strip trailing
      }
    }
    
    // Populates the country selected with the counties from the country list
    function populateCountry(defaultCountry) {
      if ( postCountry != '' ) {
        defaultCountry = postCountry;
      }
      var countryLineArray = country.split('|');  // Split into lines
      var selObj = document.getElementById('countrySelect');
      selObj.options[0] = new Option('Select Country','');
      selObj.selectedIndex = 0;
      for (var loop = 0; loop < countryLineArray.length; loop++) {
        lineArray = countryLineArray[loop].split(':');
        countryCode  = TrimString(lineArray[0]);
        countryName  = TrimString(lineArray[1]);
        if ( countryCode != '' ) {
          selObj.options[loop + 1] = new Option(countryName, countryCode);
        }
        if ( defaultCountry == countryCode ) {
          selObj.selectedIndex = loop + 1;
        }
      }
    }
    
    function populateState() {
      var selObj = document.getElementById('stateSelect');
      var foundState = false;
      // Empty options just in case new drop down is shorter
      if ( selObj.type == 'select-one' ) {
        for (var i = 0; i < selObj.options.length; i++) {
          selObj.options[i] = null;
        }
        selObj.options.length=null;
        selObj.options[0] = new Option('Select State','');
        selObj.selectedIndex = 0;
      }
      // Populate the drop down with states from the selected country
      var stateLineArray = state.split("|");  // Split into lines
      var optionCntr = 1;
      for (var loop = 0; loop < stateLineArray.length; loop++) {
        lineArray = stateLineArray[loop].split(":");
        countryCode  = TrimString(lineArray[0]);
        stateCode    = TrimString(lineArray[1]);
        stateName    = TrimString(lineArray[2]);
      if (document.getElementById('countrySelect').value == countryCode && countryCode != '' ) {
        // If it's a input element, change it to a select
          if ( selObj.type == 'text' ) {
            parentObj = document.getElementById('stateSelect').parentNode;
            parentObj.removeChild(selObj);
            var inputSel = document.createElement("SELECT");
            inputSel.setAttribute("name","state");
            inputSel.setAttribute("id","stateSelect");
            parentObj.appendChild(inputSel) ;
            selObj = document.getElementById('stateSelect');
            selObj.options[0] = new Option('Select State','');
            selObj.selectedIndex = 0;
          }
          if ( stateCode != '' ) {
            selObj.options[optionCntr] = new Option(stateName, stateCode);
          }
          // See if it's selected from a previous post
          if ( stateCode == postState && countryCode == postCountry ) {
            selObj.selectedIndex = optionCntr;
          }
          foundState = true;
          optionCntr++
        }
      }
      // If the country has no states, change the select to a text box
      if ( ! foundState ) {
        parentObj = document.getElementById('stateSelect').parentNode;
        parentObj.removeChild(selObj);
      // Create the Input Field
        var inputEl = document.createElement("INPUT");
        inputEl.setAttribute("id", "stateSelect");
        inputEl.setAttribute("type", "text");
        inputEl.setAttribute("name", "state");
        inputEl.setAttribute("size", 20);
        inputEl.setAttribute("value", postState);
        parentObj.appendChild(inputEl) ;
      }
    }
    
    function initCountry(country) {
      populateCountry(country);
      populateState();
    }
    And the Code for my registration page:

    Code:
    //TOP OF PAGE//
    
    <head>
    
    <script type="text/javascript" src="JS/auto_country-county.js"></script>
    
    </head>
    
    <body onload="initCountry('UK')">
    
    
    //WITHIN THE REG FORM//
    
    <div class="regformcellleft">COUNTRY</div><div class="regformcellright">
    <p class="forms"><select id='countrySelect' name='country' onchange='populateState()'></select></p>
    </div>
    
    <div class="regformcellleft">COUNTY/STATE</div><div class="regformcellright">
    <p class="forms"><select id='stateSelect' name='state'></select>
    </p>
    </div>
    
    </body>
    Ive got rid of all the excess code in the body so its easier to read.

    Does anyone have any ideas?

    Many Regards

  • #2
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    Did you get any error messages? Have you tried to run it in Firefox with Firebug? Have you tried to debug the code by placing alerts in it to see if functions are being called correctly?

    That is a lot of code and mark-up to go through without any error messages.

    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]


  •  

    Posting Permissions

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