Get response

Question

I have a form in which I have a list of Indian States and Cities. On selecting one of the states, the cities from that state are to be displayed in the <select> to show cities. I am using a php script hosted somewhere (a similar website) and I think that it can solve my purpose. The script takes the value of State options as parameter and returns a <select> with the corresponding cities.

The script is http://www.indane.co.in/state.php?stateid=2196 where 2196 is the ID/value of the selected state.

I need to display contents of this in my cities' .

Please suggest me how can I do this.

So far I have tried this,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript">
function showcat(id,ss,type)
{
    var cid=id.value;
    if(type=='state')
    {
        document.getElementById("state_loading").style.visibility="visible";
        var response = httpGet("http://www.indane.co.in/state.php?stateid="+cid);
        var id=document.getElementById('bgcity');
        id.innerHTML=response;
    }
}
function httpGet(theUrl)
    {
    var xHRObject = new XMLHttpRequest();
var url = theUrl;
xHRObject.open("GET", url, true);
xHRObject.send();
xHRObject.onreadystatechange = function () {
if (xHRObject.readyState==4 && xHRObject.status==200) {
    var response = xHRObject.responseText;             
      return response;
    }
}
    }
</script>
</head>

<body>
<select name="bgstate" id="bgstate" style="width:200px" onChange="showcat(this,'sub1','state');">
                  <option value="">[ SELECT STATE ]</option>
                                          <option value="2169" >Andhra Pradesh</option>
                                          <option value="2196" >Arunachal Pradesh</option>
                                          <option value="2170" >Assam</option>
                                          <option value="2171" >Bihar</option>
                                          <option value="5267" >Chhattisgarh</option>
                                          <option value="2174" >Delhi</option>
                                          <option value="2199" >Goa</option>
                                          <option value="2175" >Gujarat</option>
                                          <option value="2176" >Haryana</option>
                                          <option value="2177" >Himachal Pradesh</option>
                                          <option value="2178" >Jammu and Kashmir</option>
                                          <option value="5268" >Jharkhand</option>
                                          <option value="2185" >Karnataka</option>
                                          <option value="2179" >Kerala</option>
                                          <option value="2181" >Madhya Pradesh</option>
                                          <option value="2182" >Maharashtra</option>
                                          <option value="2183" >Manipur</option>
                                          <option value="2184" >Meghalaya</option>
                                          <option value="2197" >Mizoram</option>
                                          <option value="2186" >Nagaland</option>
                                          <option value="2187" >Orissa</option>
                                          <option value="2189" >Punjab</option>
                                          <option value="2190" >Rajasthan</option>
                                          <option value="2195" >Sikkim</option>
                                          <option value="2191" >Tamil Nadu</option>
                                          <option value="2192" >Tripura</option>
                                          <option value="5269" >UNION TERRITORY</option>
                                          <option value="2193" >Uttar Pradesh</option>
                                          <option value="5259" >Uttaranchal</option>
                                          <option value="2194" >West Bengal</option>

                    </select>           
                    <span id="state_loading" style="visibility:hidden;"><img src="http://www.indane.co.in/images/ajax_small_load.gif" /></span>     
                </td>
            </tr>

            <br/>
            <tr valign="top">
              <td>&nbsp;</td>
              <td height="25" >City <span class="error">*</span></td>
              <td colspan="2">
              <span id="sub1">
              <select name="bgcity" style="width:200px" id="bgcity" >
                 <option value="">[SELECT CITY]</option>
                </select>  
               </span> 
                <span id="city_loading" style="visibility:hidden;"><img src="http://www.indane.co.in/images/ajax_small_load.gif" /></span>          
                <input type="button" value="Search"  onClick="showcat(document.getElementById('bgcity'),'sub2','city');" style="cursor:pointer;" />

            </tr>    
</body>
</html>

you need to fetch the options from the http://www.indane.co.in/state.php?stateid=2196 script and load the options in the html page...in your city dropdown — plain jane, Sep 04 '13 at 06:06
http://www.indane.co.in is extremely slow. I tried, but I cant wait 2 minutes per every request, just too slow man. — Hanlet Escaño, Sep 04 '13 at 06:07
you are building the dropdown in http://www.indane.co.in/state.php?stateid=2196 instead have only options in it.. — plain jane, Sep 04 '13 at 06:09
Ok, Two things, One, Is there a way I can download that script? Two, How do I fetch and load the options in my page? I tried that in my code but didn't seem to work. Please consider me a beginner. — Samarth Agarwal, Sep 04 '13 at 06:09
@Sonali Mam, the script is not mine. I am trying to make use of it. — Samarth Agarwal, Sep 04 '13 at 06:10
@HanletEscaño Sir, the script works fast when I try it on http://indane.co.in/new_distributor.php . Why so? — Samarth Agarwal, Sep 04 '13 at 06:16
check the accepted answer [here](http://stackoverflow.com/questions/9394992/how-to-populate-on-drop-down-based-on-the-value-from-other-drop-down-in-php-and) — plain jane, Sep 04 '13 at 06:18
Yes but does that matter? I am not using the other two! I also tried your answer. I think we are getting closer. I got `undefined` and the City ` — Samarth Agarwal, Sep 04 '13 at 06:29

plain jane · Answer 1 · 2013-09-04T06:51:26.313

1

Problem 1-The problem is the URL for city dropdown is returning a selectbox and you are replacing the options of the selectbox in your page with another selectbox

Another problem is access-control-allow-origin header.

Replace the city drop down in your page with the following

       <span id="bgcity">
      <select name="bgcity" style="width:200px" >
         <option value="">[SELECT CITY]</option>
        </select>  
       </span>

Change your showcat as

function showcat(id,ss,type)
{
   var cid=id.value;
   if(type=='state')
   {
        document.getElementById("state_loading").style.visibility="visible";
        var response = httpGet("http://www.indane.co.in/state.php?stateid="+cid);
         if(response !== undefined)
        {
           var id=document.getElementById('bgcity');
           id.innerHTML=response;
        }
    }
}

I have removed the id associated with the select box to the span so that it replaces the whole drop down..and remove the second parameter in your showcat function as this change will give error...

edited Sep 04 '13 at 06:51

answered Sep 04 '13 at 06:24

plain jane

1,009
1
8
19

Getting `undefined` in place of ` – Samarth Agarwal Sep 04 '13 at 06:33
Made changes. When I select a state, the `state_loading` GIF is visible, and no items are loading into the city – Samarth Agarwal Sep 04 '13 at 06:38
I also tried placing an `alert()` inside the if-block and it never showed which means the response is always undefined. – Samarth Agarwal Sep 04 '13 at 06:41
check your browsers error log..I got error "Origin http://fiddle.jshell.net is not allowed by Access-Control-Allow-Origin." in jsfiddle and my localhost also got this error – plain jane Sep 04 '13 at 06:42
your problem is [explained here](http://stackoverflow.com/questions/10636611/how-does-access-control-allow-origin-header-work) – plain jane Sep 04 '13 at 06:49
Not able to identify the issue. – Samarth Agarwal Sep 04 '13 at 06:58
Can I download and use it then? – Samarth Agarwal Sep 04 '13 at 07:01
Do I have any alternatives to achieve this functionality? – Samarth Agarwal Sep 04 '13 at 07:02
I can't find any such script. Will it be ok if I write a few thousand lines of js myself for this? Will it make the page slow? – Samarth Agarwal Sep 04 '13 at 07:08

Get response and show it in form

1 Answers1

Get response