Wednesday, December 26, 2012


To know the basics of Ajax refer

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 name="caste" id="caste">
           // Your options here

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");
                                  alert("Your browser does not support XMLHTTP!");
                                                                var ss=document.getElementById('caste');                 
                                                                ss.innerHTML= xmlhttp.responseText;                                        

The above code calls the showCaste.php page where we have written the code to populate the caste pulldown.

//steps to initiate connection to the database
$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;

No comments:

Post a Comment