Dropdown using Ajax

Question

I wrote the below code; when I select India/America in the dropdown related text files with some contents, has to be read and displayed inside a div element, but am getting an error in the line xhr.send()

can anyone explain why??

<html>
<head>
<script>
function getcity()
{
    var a=document.getElementById("country");
    var b=a[a.selectedIndex].value;
    alert(b);
    var xhr=new XMLHttpRequest();
    if(b=="India")
    {
        xhr.onreadystatechange=function()
        {
            if((xhr.readystate==4)&&(xhr.status==200||xhr.status==304))
            {
                document.getElementByID("display").innerHTML=xhr.responseText;
            }
        }
        xhr.open("GET","india.txt",true);
    }
    else
    {
        xhr.onreadystatechange=function()
        {
            if((xhr.readystate==4)&&(xhr.status==200||xhr.status==304))
            {
                document.getElementByID("display").innerHTML=xhr.responseText;
            }
        }
        xhr.open("GET","america.txt",true);
    }
    xhr.send(null);
}
</script>
</head>
<body>
<select id="country" onchange="getcity()">
<option>India</option>
<option>America</option>
</select>
<div id="display"></div>
</body>
</html>

i tried Rajesh...Still it is not showing the contents in the text file...the contents are just a plain String — user3094600, Jan 29 '14 at 08:52
See this "http://stackoverflow.com/questions/8866761/xmlhttprequest-error" May be this will help... — Akshay Paghdar, Jan 29 '14 at 08:54
i tried debugging the code in firefox..but the readystate seems to be 1 and not 4...can this be the cause of error...or is it because of the text file???? — user3094600, Jan 29 '14 at 08:58
if((xhr.readystate==4)&&(xhr.status==200||xhr.status==304)) { alert(xhr.responeText);document.getElementByID("display").innerHTML=xhr.responseText; } — ℛⱥℐℰşℎ, Jan 29 '14 at 09:15
Am getting an alert,,but it does not contain the contents of the text file that has to be read.. — user3094600, Jan 29 '14 at 09:19
Check if your Code file and Text file are in the same folder — ℛⱥℐℰşℎ, Jan 29 '14 at 09:23
Hey I tried your code on localhost.. And it's working... are u missing to import jquey ` ` — ℛⱥℐℰşℎ, Jan 29 '14 at 09:29
Can u send the complete script tag for importing that script — user3094600, Jan 29 '14 at 09:42

score 0 · Accepted Answer · answered Jan 29 '14 at 09:53

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script>
function getcity()
{
    var a=document.getElementById("country");
    var b=a[a.selectedIndex].value;
    alert(b);
    var xhr=new XMLHttpRequest();
    if(b=="India")
    {
        xhr.onreadystatechange=function()
        {
            if((xhr.readystate==4)&&(xhr.status==200||xhr.status==304))
            {
                document.getElementByID("display").innerHTML=xhr.responseText;
            }
        }
        xhr.open("GET","india.txt",true);
    }
    else
    {
        xhr.onreadystatechange=function()
        {
            if((xhr.readystate==4)&&(xhr.status==200||xhr.status==304))
            {
                document.getElementByID("display").innerHTML=xhr.responseText;
            }
        }
        xhr.open("GET","america.txt",true);
    }
    xhr.send(null);
}
</script>
</head>
<body>
<select id="country" onchange="getcity()">
<option>India</option>
<option>America</option>
</select>
<div id="display"></div>
</body>
</html>

But how come am not getting the output...do i have to do any port configurations???? — user3094600, Jan 29 '14 at 09:56
i have the file locally stored in my sys tem,,,How would the URL of the file be???? — user3094600, Jan 30 '14 at 12:13
Place that file in the drive path C:\xampp\htdocs\YourFile.html. And open browser and type in address bar localhost\YourFile.html. This is using XAMPP — ℛⱥℐℰşℎ, Jan 31 '14 at 04:05

Dropdown using Ajax

1 Answers1