Multiple populated dropdowns
Hi everyone. I am trying to have 2 sets of populated dropdowns (state,city). One for the billing address and the other one for shipping address. I read this article http://www.digimantra.com/technology...ered-dropdown/ and did it step by step. It worked when I had only a set of populated dropdowns but when I duplicated and edited the script, only the new script works. Can somebody tell me where I went wrong? Here's the code for the script:
<script type="text/javascript">
//define the absolute path to your php script here
var site_root='';
//function to create ajax object
function pullAjax(){
var a;
try{
a=new XMLHttpRequest()
}
catch(b)
{
try
{
a=new ActiveXObject("Msxml2.XMLHTTP")
}catch(b)
{
try
{
a=new ActiveXObject("Microsoft.XMLHTTP")
}
catch(b)
{
alert("Your browser broke!");return false
}
}
}
return a;
}
//this function does the ajax call, and appends cities into the second dropdown
function populate_cities(x)
{
obj=pullAjax();
var cities_list=document.getElementById('city');
obj.onreadystatechange=function()
{
if(obj.readyState==4)
{
//returns comma separated list of cities after successful ajax request
var tmp=obj.responseText;
//split function returns array of city
cities=tmp.split(',');
//if second dropdown already has some data, CLEAR it
if(cities_list.length>1)
clean_cities(cities_list);
//for loop to append the cities
var i=0;
for(i=0;i<cities.length;i++)
append_city(cities[i]);
}
};
obj.open("GET",site_root+"cities_data.php?state="+ x.value,true);
obj.send(null);
}
//this gets call in the for loop and creates the options for the dropdown
function append_city(city_value)
{
var cities_list=document.getElementById('city');
cities_list.options[cities_list.options.length]=new Option(city_value,city_value,false,false);
}
//CLEARs the dropdown
function clean_cities()
{
var cities_list=document.getElementById('city');
cities_list.options.length=1;
}
//autoloads the city list, when the page first loads
function autoload()
{
populate_cities(document.getElementById('state_pro vince'));
}
</script>
<script type="text/javascript">
//define the absolute path to your php script here
var site_root='';
//function to create ajax object
function pullAjax(){
var a;
try{
a=new XMLHttpRequest()
}
catch(b)
{
try
{
a=new ActiveXObject("Msxml2.XMLHTTP")
}catch(b)
{
try
{
a=new ActiveXObject("Microsoft.XMLHTTP")
}
catch(b)
{
alert("Your browser broke!");return false
}
}
}
return a;
}
//this function does the ajax call, and appends cities into the second dropdown
function populate_cities(x)
{
obj=pullAjax();
var cities_list=document.getElementById('shipping_city ');
obj.onreadystatechange=function()
{
if(obj.readyState==4)
{
//returns comma separated list of cities after successful ajax request
var tmp=obj.responseText;
//split function returns array of city
cities=tmp.split(',');
//if second dropdown already has some data, CLEAR it
if(cities_list.length>1)
clean_cities(cities_list);
//for loop to append the cities
var i=0;
for(i=0;i<cities.length;i++)
append_city(cities[i]);
}
};
obj.open("GET",site_root+"shipping_cities_data.php ?state="+x.value,true);
obj.send(null);
}
//this gets call in the for loop and creates the options for the dropdown
function append_city(city_value)
{
var cities_list=document.getElementById('shipping_city ');
cities_list.options[cities_list.options.length]=new Option(city_value,city_value,false,false);
}
//CLEARs the dropdown
function clean_cities()
{
var cities_list=document.getElementById('shipping_city ');
cities_list.options.length=1;
}
//autoloads the city list, when the page first loads
function autoload()
{
populate_cities(document.getElementById('shipping_ state_province'));
}
</script>
Thanks!
D
