CODEWITHSUNDEEP
php
Saswat
Saswat

Reputation: 12856

populating two dropdown list using ajax

I have two dropdowns and I want the second dropdown to get populated on the basis of the data selected from the 1st dropdown

Here is my main.php:

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

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

And this is getcaste.php:

<?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);
?>  
<html>
</html>

now for the javascript ajax file,(religion_caste.js)

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 && 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();
}

For more better assistance, the database table contains two fields, religion and caste, where the first attribute is religion, and caste being the second.

If somehow I can catch the string str, then it could have solved the matter.

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

But if I write the following code:

var string=(document.getElementById("view").InnerHTML);
alert(string);

Then a msgbox pops up with such view:

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




"Catholic","Protestant"

If I could just get the string, I would be happy.

Upvotes: 0

Views: 3023

Answers (1)

Milan Halada
Milan Halada

Reputation: 1934

So in your place a would do a little remake in getcaste.php first - place all results from your query into an array and then use implode to get a string using delimiter - ;. (Optionaly you could use a json and decode it in js). In religion_caste.js use split to get an array back from it (; as delimiter); Now use for cycle to cycle through all values, and every cycle add one option into select

example: 

var select = document.getElementById("caste");
for (var key in values)
{
    var OptNew = document.createElement('option');
    OptNew.text = values[key];
    OptNew.value = key;
    try 
    {
        select.add(OptNew, null); // doesn't work in IE
    }
    catch(ex) 
    {
        select.add(OptNew); // IE only
    }
}

Edit:

so json in php is easy - json_encode json in js is a little bit more difficult. New browsers should support JSON.parse, for old ones you have to use this code(Not 100% sure here since I always use jQuery). Alternatively you could use jQuery and jQuery.parseJSON

Upvotes: 1

Related Questions