When i run it on server doesnt retrieve any result from my xml files and doesn`t give any xmlHttpRequest error on "Google Chrome Developer Tools". Do i need to use "onclick" event on every "option" or i need to use "onchange" event.
I want to make it when an option is checked or selected, to send XMLHttpRequest to server and retrieve the informations (city, village ,street, code) from the specified XML file.
function showTowns()
{
var xhr;
var selectValue;
selectValue=document.getElementById("selectBox").value;
var url1="countriesItaXML.xml";
var url2="countriesMakXML.xml";
var url3="countriesUSAXML.xml";
var txt,city,village,street,country,x,xx;
if(window.XMLHttpRequest)
{
xhr= new XMLHttpRequest();
}
else
{
xhr= new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.onreadystatechange=function()
{
if(xhr.readyState==4 && xhr.status==200)
{
if(selectValue=="o1")
{
x=xhr.responseXML.documentElement.getElementsByTagName("country");
for(i=0;i<x.length;i++)
{
city="";
xx=x[i].getElementsByTagName("city");
{
try
{
city=xx[0].firstChild.nodeValue;
}
catch(er)
{
city="undefined";
}
}
village="";
xx=x[i].getElementsByTagName("village");
{
try
{
village=xx[0].firstChild.nodeValue;
}
catch(er)
{
village="undefined";
}
}
street="";
xx=x[i].getElementsByTagName("street");
{
try
{
street=xx[0].firstChild.nodeValue;
}
catch(er)
{
street="undefined";
}
}
code="";
xx=x[i].getElementsByTagName("code");
{
try
{
code=xx[0].firstChild.nodeValue;
}
catch(er)
{
code="undefined";
}
}
txt="<table border='1'><th>City:</th><td>"+city+"</td></tr><tr><th>Village:</th><td>"+village+"</td></tr><tr><th>Street:</th><td>"+street+"</td></tr><tr><th>Code:</th><td>"+code+"</td></tr></table><br />";
document.getElementById('prvGrad').innerHTML=txt;
}
xhr.open("GET",url1,true);
xhr.send();
}
else if(selectValue=="o2")
{
x=xhr.responseXML.documentElement.getElementsByTagName("country");
for(i=0;i<x.length;i++)
{
city="";
xx=x[i].getElementsByTagName("city");
{
try
{
city=xx[0].firstChild.nodeValue;
}
catch(er)
{
city="undefined";
}
}
village="";
xx=x[i].getElementsByTagName("village");
{
try
{
village=xx[0].firstChild.nodeValue;
}
catch(er)
{
village="undefined";
}
}
street="";
xx=x[i].getElementsByTagName("street");
{
try
{
street=xx[0].firstChild.nodeValue;
}
catch(er)
{
street="undefined";
}
}
code="";
xx=x[i].getElementsByTagName("code");
{
try
{
code=xx[0].firstChild.nodeValue;
}
catch(er)
{
code="undefined";
}
}
txt="<table border='1'><th>City:</th><td>"+city+"</td></tr><tr><th>Village:</th><td>"+village+"</td></tr><tr><th>Street:</th><td>"+street+"</td></tr><tr><th>Code:</th><td>"+code+"</td></tr></table><br />";
document.getElementById('prvGrad').innerHTML=txt;
}
xhr.open("GET",url2,true);
xhr.send();
}
else
{
x=xhr.responseXML.documentElement.getElementsByTagName("country");
for(i=0;i<x.length;i++)
{
city="";
xx=x[i].getElementsByTagName("city");
{
try
{
city=xx[0].firstChild.nodeValue;
}
catch(er)
{
city="undefined";
}
}
village="";
xx=x[i].getElementsByTagName("village");
{
try
{
village=xx[0].firstChild.nodeValue;
}
catch(er)
{
village="undefined";
}
}
street="";
xx=x[i].getElementsByTagName("street");
{
try
{
street=xx[0].firstChild.nodeValue;
}
catch(er)
{
street="undefined";
}
}
code="";
xx=x[i].getElementsByTagName("code");
{
try
{
code=xx[0].firstChild.nodeValue;
}
catch(er)
{
code="undefined";
}
}
txt="<table border='1'><th>City:</th><td>"+city+"</td></tr><tr><th>Village:</th><td>"+village+"</td></tr><tr><th>Street:</th><td>"+street+"</td></tr><tr><th>Code:</th><td>"+code+"</td></tr></table><br />";
document.getElementById('prvGrad').innerHTML=txt;
}
xhr.open("GET",url3,true);
xhr.send();
}
}
}
}
</script>
XML code
<asd>
<country>
<city> New Hampshire </city>
<village> North Conway </village>
<street> White Mount.High. </street>
<code> 3254 </code>
</country>
<country>
<city> Massachussets </city>
<village> Boston </village>
<street> HelloStreet 85 </street>
<code> 020200 </code>
</country>
<country>
<city> New York </city>
<village> New Jersey </village>
<street> NovaJersovska 85 </street>
<code> 99952 enter code here</code>
</country>
</asd>
And HTML code
<select name="countriesList" id="selectBox" onchange="showTowns(this.value)">
<option value="o1" id="1">Italia</option>
<option value="o2" id="2" selected="selected">Makedonija</option>
<option value="o3" id="3">USA</option>
</select>
