Month: March 2008

[UPDATE] The download is no longer supported or updated and has been removed

UPDATE 26 January 2009: Fixed the XML file load Bug that was affecting Chrome and Safari 

Making use of my XML based Country and State/Province file I have put together a small script to populate two drop down lists with the complete Country and the selected countries Province or State list.

The code is ALL client-side based, so it will suffer from browsers without JavaScript enabled, but it is a very fast and light weight script to use if you want to quickly add a Country and State selection box to your registration forms. This script does not require any database to function.

Code Explanation:
The initial XML Parser script:

if (window.ActiveXObject) 
{
    xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
    xmlDoc.async=false;
    xmlDoc.load("country_state.xml");
}
else if (document.implementation && 
document.implementation.createDocument) 
{
    var xmlhttp = new window.XMLHttpRequest();
    xmlhttp.open("GET","country_state.xml",false);
    xmlhttp.send(null);
    xmlDoc = xmlhttp.responseXML.documentElement;
}

xmlDoc.async=false;

xmlDoc.load("country_state.xml");

Internet Explorer has had a built in XML parser since version 5, but this parser opens XML files differently to other browsers (Firefox, Opera, etc), so to load an XML file you need to first check which browser is running on the client, For IE:

window.ActiveXObject

and a double check for other browsers:

document.implementation && 
document.implementation.createDocument

If IE exists, create an empty Microsoft XML document object:

xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async=false;
    xmlDoc.load("country_state.xml");

Or for Other browsers:

    var xmlhttp = new window.XMLHttpRequest();
    xmlhttp.open("GET","country_state.xml",false);
    xmlhttp.send(null);
    xmlDoc = xmlhttp.responseXML.documentElement;

Once the browser check is done it loads the XML document, from here on the code works the same in IE as in other browsers.

On a side note, there is an easy way to test that your XML file has been loaded correctly during development. Just add the document.write or alert function to return the number of nodes in the XML file (in my country_state XML example I would return the number of <country> nodes – with the expected result being 252):

document.write(xmlDoc.getElementsByTagName("country").length);

Once the XML file has loaded correctly, you can perform functions using the file. The next part of my code calls the fillCountryList() function that populates the first select box. I call the fillCountryList() function in my onload() event handler:
HTML:

JavaScript:

function fillCountryList ()
{
    var countryList = document.getElementById("cboCountry");

    for (var x = countryList.options.length-1; x >-1; x--)
    {
        countryList.options[x] = null;
    }
    var countryNames = xmlDoc.getElementsByTagName("country");
    var numberOfCountries = countryNames.length;

    for (var i=0; i<=numberOfCountries-1; i++)
    {
        var currentCountry =  countryNames[i].getAttribute("name");
        fillList(countryList,currentCountry,currentCountry);
    }
}

The fillCountryList() function identifies the first selection box with the specified ID (in my example cboCountry), the function then clears all current entries in the selection box. Clearing entries is good way to prevent duplicate information from being in your selection list prior to processing. On another side note, having VALID data in your selection box is an excellent way to still have your web page form display correctly if JavaScript is disabled on the client; this data can act as an alternative to the JavaScript data; an example of alternative data for the country selection box is listed.
Alternative HTML example:

Select a Country

South Africa

USA

UK

Other

The above code example is NOT a requirement, and my current example does not have any alternative data, but it can help your website to degrade well under different client environments.

The next part of the fillCountryList() function is getting the country names from loaded XML file:

var countryNames = xmlDoc.getElementsByTagName("country");

This will return an object collection for all nodes with the <country> tag to an array in the countryNames variable. A loop then processes the array and adds each country to the cboCountry select box using the fillList() function.

The state select box is only populated once a new country has been selected using the onChange event handler. Note: you should also be able to use the onClick event handler rather than the onChange event handler.

The fillStateList() function populates the States in the same way as the fillCountryList() function does, but first gets the selected countries array ID out of the country array before looping through THAT countries State/Province array therby filling the cboState select box with valid states.

Hopefully this code and explanation will assist beginners and experts alike. Download and enjoy.

This script has been tested under Firefox, Opera, and Internet Explorer 6 & Internet Explorer 7, Google Chrome and Safari 3.
Currently NOT working in Safari. Safari processes the “document. getElementsByTagName” function differently to other browsers, I will find a fix and release an updated version of the script soon.
UPDATE 26 January 2009: Fixed XML file load for Chrome and Safari :- Please drop me a line if you find any bugs that I may have missed.

Questions and comments are welcome.

License: Creative Commons Attribution 2.5 South Africa License.