Showing posts with label Ajax. Show all posts
Showing posts with label Ajax. Show all posts
Wednesday, December 26, 2012
AJAX DEPENDENT DROP DOWN
No comments:
Labels:
Ajax,
PHP
To know the basics of Ajax refer http://w3schools.com/ajax/default.asp
Say your pull down menu Caste is dependent with the pull down menu Religion as given below
<select name="religion" id="religion" onchange="showCaste(this.value)">
// Your options here
</select>
<select name="caste" id="caste">
// Your options here
</select>
In the religion pull down menu we add a property onchange. That is when we select a particular religion the function showCaste will be called. this.value is the value of the selected religion.
The below javascript code should be included in the head section of the page.
// JavaScript Document
<script type="text/javascript">
function showCaste(religion_id)
{
var xmlhttp;
if (window.XMLHttpRequest)
xmlhttp=new XMLHttpRequest();
else if (window.ActiveXObject)
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
else
alert("Your browser does not support XMLHTTP!");
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
{
var ss=document.getElementById('caste');
ss.innerHTML= xmlhttp.responseText;
}
}
xmlhttp.open("GET","showCaste.php?religion="+religion_id+"&token="+Math.random()*5,true);
xmlhttp.send(null);
}
</script>
The above code calls the showCaste.php page where we have written the code to populate the caste pulldown.
//showCaste.php
<?php
//steps to initiate connection to the database
$religion=$_GET['religion'];
$result = mysql_query("SELECT * FROM caste WHERE religion_id='".$religion."'");
while($row = mysql_fetch_array($result))
{
$pullDown.="<option value=".$row['id'].">".$row['display']."</option>";
}
echo $pullDown;
?>
Subscribe to:
Posts (Atom)