populating two dropdown list using ajax
<p>friendz, i' a little bit stuck in a matter......i know i did my homework on this, but still i cant get near any further.....</p>

<p>i have two dropdown and i want the second dropdown to get populated on the basis of the data selected from the 1st dropdwn</p>

<p>here's my main.php</p>

<pre><code>&lt;?php
 include('connection.php');
 $query_religion="SELECT DISTINCT religion FROM religion_caste_table";
 $result_religion = mysql_query($query_religion, $con);
 ?&gt;

&lt;html&gt;
&lt;body&gt;
    &lt;select name="religion" id="religion" style="width: 100px" onChange="showcaste(this.value)"&gt;
                              &lt;?php
                              while($q_rel_data = mysql_fetch_array($result_religion))
                               {?&gt;
                                &lt;option value="&lt;?php echo $q_rel_data[0]; ?&gt;"&gt;
                                &lt;?php echo $q_rel_data[0]; ?&gt;
                                &lt;/option&gt;
                                &lt;?php }?&gt;
                           &lt;/select&gt;
    &lt;div id="view"&gt;&lt;/div&gt;
    &lt;select name="caste" id="caste" style="width: 100px"&gt;&lt;/select&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>and this is getcaste.php</p>

<pre class="lang-php prettyprint-override"><code>&lt;?php 
include('connection.php');
$string=$_GET["religion"];

$sql="SELECT caste FROM religion_caste_table WHERE religion = '".$string."'";
$result = mysql_query($sql,$con);
$myarray=array();
$str="";
while($result_caste=mysql_fetch_array($result))
{
$str=$str . "\"$result_caste[caste]\"".",";
}
$str=substr($str,0,(strLen($str)-1)); // Removing the last char , from the string
echo $str;/*Stop hiding from IE Mac */

//echo $string;
mysql_close($con);
?&gt;  
&lt;html&gt;
&lt;/html&gt;
</code></pre>

<p>now for the javascript ajax file,(religion_caste.js)</p>

<pre><code>function showcaste(string)
{
if (string=="")
  {
  document.getElementById("caste").innerHTML="";
  return;
  }

alert(string);
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 &amp;&amp; xmlhttp.status==200)
    {
         document.getElementById("view").innerHTML=xmlhttp.responseText;
         //now how to catch the string from (getcaste.php), split it and save it into array
          // and to populate the second dropdwn by the array;

    }
  }
xmlhttp.open("GET","getcaste.php?religion="+string,true);
xmlhttp.send();
}
</code></pre>

<p>for more better assistanse, the database table contains two fields, religion and caste, where the first attribute is religion, and caste being the second........</p>

<p>if somehow i can catch the string str, then it could have solved the matter..</p>

<p>document.getElementById("view").InnerHTML=xmlhttp.responseText provides the string "str1","str2",...  to be viewed in </p>

<p>but if i write the following code</p>

<pre><code>var string=(document.getElementById("view").InnerHTML);
alert(string);
</code></pre>

<p>then a msgbox pops up with such view</p>

<pre><code>&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;





"Catholic","Protestant" 
</code></pre>

<p>if i could jst get the string, it wud have been solved</p>
