Below is the ajax code to perform the subjected action but it is implemented in a manner of elaboration instead of do it with simple one.
Here implemented separate code for each ajax request and response.
please see the below code:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#country").change(function(){
var country=$("#country").val();
$.ajax({
type:"post",
url:"getstate.php",
data:'typeId='+country,
success:function(data){
$("#state").html(data);
}
});
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#state").change(function(){
var state=$("#state").val();
$.ajax({
type:"post",
url:"getdistrict.php",
data:'typeId='+state,
success:function(data){
$("#district").html(data);
}
});
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#district").change(function(){
var district=$("#district").val();
$.ajax({
type:"post",
url:"getward.php",
data:'typeId='+district,
success:function(data){
$("#ward").html(data);
}
});
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#ward").change(function(){
var ward=$("#ward").val();
$.ajax({
type:"post",
url:"getslum.php",
data:'typeId='+ward,
success:function(data){
$("#slum").html(data);
}
});
});
});
</script>
</head>
<body>
Country : <select name="country" id="country">
<option>-select your country-</option>
<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
include "dbconfig.php";
$result=sqlsrv_query($conn,"SELECT [CountryId],[Country] from toilet_Country order by Country");
while($country=sqlsrv_fetch_array($result)){
echo "<option value = $country[CountryId]>$country[Country]</option>";
} ?>
</select> <br><br> State :  <select name="state" id="state">
<option>-select your state-</option>
</select> <br><br> District : <select name="district" id="district">
<option>-select your District-</option>
</select> <br><br>
Ward : <select name="ward" id="ward">
<option>-select your ward-</option>
</select> <br><br>
Slum : <select name="slum" id="slum">
<option>-select your slum name-</option>
</select> <br><br>
</body>
</html>
And i have written code in separate files to retrieve country,state,district information from database.
I am unaware of these ajax call request and response and looking for advise how can i make this code portable.
Thanks in advance.