...

View Full Version : auto-populate html selects (country/state) not working?



lpeek
05-04-2008, 09:13 AM
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:


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:




//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

A1ien51
05-04-2008, 12:46 PM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum