title: populating two dropdown list using ajax
body: <p>I have two dropdowns and I want the second dropdown to get populated on the basis of the data selected from the 1st dropdown</p>
  
  <p>Here is 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 assistance, 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><code>document.getElementById("view").InnerHTML=xmlhttp.responseText</code> provides the string "str1","str2",...  to be viewed in <code>&lt;div id="view"&gt;</code></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 just get the string, I would be happy.</p>