CODEWITHSUNDEEP
phpjavascripthtml
Samarth Agarwal
Samarth Agarwal

Reputation: 2134

Get response <select> and show it in form <select>

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>

Upvotes: 0

Views: 1156

Answers (1)

plain jane
plain jane

Reputation: 1007

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...

Upvotes: 1

Related Questions