Here in this blog i have shown a simple example how to use AJAX to send and retrieve data from a PHP page and then populate the result from a PHP page in a HTML element.
The example here shows when I select a country a request is send to PHP page and the result i.e. the states of that country are populated into another SELECT element and when i select a states then again a request is sent to the PHP page and the result i.e. the cities are populated into another SELECT element accordingly.
Here is JQUERY code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#cnrty").change(function(){
$("#city option").remove();
var val = $("#cnrty option:selected").text();
$.ajax({
url: "get_details.php",
type: 'POST',
data: { country : val },
success: function(data) {
//$('#lblmsg3').text("Invalid Username/Password");
$("#states").html(data);
},
error: function(xhr, textStatus, errorThrown) {
alert("An error occurred with the server");
}
});
})
$("#states").change(function(){
var val = $("#states option:selected").text();
$.ajax({
url: "get_details.php",
type: 'POST',
data: { states : val },
success: function(data) {
//$('#lblmsg3').text("Invalid Username/Password");
$("#city").html(data);
},
error: function(xhr, textStatus, errorThrown) {
alert("An error occurred with the server");
}
});
})
});
</script>
Here is Body :
<body>
<select id="cnrty">
<option value="0">-Select Country-</option>
<option value="1">India</option>
<option value="2">USA</option>
</select>
<select id="states">
</select>
<select id="city">
</select>
</body>
And here is PHP page:
<?php
if(isset($_POST['country']) && !empty($_POST['country'])){
$cntry = $_POST['country'];
if (strcasecmp($cntry,"India")==0) {
echo "<option value='0'>-Select States-</option>";
echo "<option value='1'>U.P.</option>";
echo "<option value='2'>Punjab</option>";
echo "<option value='3'>Rajasthan</option>";
}
else if (strcasecmp($cntry,"USA")==0 ) {
echo "<option value='0'>-Select States-</option>";
echo "<option value='1'>California</option>";
echo "<option value='2'>Hawaii</option>";
echo "<option value='3'>Texas</option>";
}
echo $cntry;
}
if(isset($_POST['states']) && !empty($_POST['states'])){
$states = $_POST['states'];
if (strcasecmp($states,'U.P.')==0) {
echo "<option value='0'>-Select City-</option>";
echo "<option value='1'>Lucknow</option>";
echo "<option value='2'>Kanpur</option>";
echo "<option value='3'>Agra</option>";
}
else if (strcasecmp($states,'Punjab')==0) {
echo "<option value='0'>-Select City-</option>";
echo "<option value='1'>Amritsar</option>";
echo "<option value='2'>Ludhiana</option>";
echo "<option value='3'>Jalandhar</option>";
}
else if (strcasecmp($states,'Rajasthan')==0) {
echo "<option value='0'>-Select City-</option>";
echo "<option value='1'>Jaipur</option>";
echo "<option value='2'>Jodhpur</option>";
echo "<option value='3'>Udaipur</option>";
}
else if (strcasecmp($states,'California')==0) {
echo "<option value='0'>-Select City-</option>";
echo "<option value='1'>Belmont</option>";
echo "<option value='2'>California City</option>";
}
else if (strcasecmp($states,'Hawaii')==0) {
echo "<option value='0'>-Select City-</option>";
echo "<option value='1'>Honolulu</option>";
echo "<option value='2'>Kula</option>";
}
else if (strcasecmp($states,'Texas')==0) {
echo "<option value='0'>-Select City-</option>";
echo "<option value='1'>Houston</option>";
echo "<option value='2'>Dallas</option>";
echo "<option value='3'>fbsql_get_autostart_info()</option>";
}
}
?>
I have written states and city hard-coded here, you can save the values in a DATABASE and then can get the data from database and use here accordingly.
0 Comment(s)