<?php
class dbmodel
{
private $dbHost = "localhost";
private $dbUsername = "root";
private $dbPassword = "";
private $dbName = "jswebsolutions";
public function __construct()
{
try {
$conn = new PDO("mysql:host=".$this->dbHost.";dbname=".$this->dbName, $this->dbUsername, $this->dbPassword);
// set the PDO error mode to exception
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$this->db = $conn;
//echo "Connected successfully<br />";
}
catch(PDOException $e)
{
echo "Connection failed: " . $e->getMessage();
}
}
}
?>
<?php
include"classCRUD.php";
$obj = new Classcrud;
$result = $obj->getalldata("countries","*","id !=''");
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12 pull-down-lg">
<h3>Dynamic Depend Dropdown List .</h3>
<hr />
</div>
<?php
if(isset($err) && $err!="")
{
?>
<div class="col-lg-12">
<p class="alert alert-danger"><i class="glyphicon glyphicon-warning-sign"></i> <?php echo $err ?></p>
</div>
<?php
}
if(isset($_GET["success"]))
{
?>
<div class="col-lg-12">
<p class="alert alert-success"><i class="glyphicon glyphicon-ok-sign"></i> <stro ng>Wow!</strong> Record inserted successfully.</p>
<script>setTimeout("window.location.href='index.php'", 2000);</script>
</div>
<?php
}
?>
<div class="col-sm-6">
<form name="createEmp" action="" class="form-horizontal" method="post">
<div class="form-group">
<label for="name">Country:</label>
<select name="country" id="country" class="form-control">
<option value="hidden">--Select--Country--Name--</option>
<?php
if($result != FALSE){
foreach($result as $list){
?>
<option value="<?php if(!empty($list['id']))echo $list['id']?>"><?php if(!empty($list['name']))echo $list['name']?></option>
<?php
}
}
?>
</select>
</div>
<div class="form-group">
<label for="email">State:</label>
<select name="state" id="state" class="form-control">
<option value="hidden">--First--Select--Country--</option>
</select>
</div>
<div class="form-group">
<label for="mobile">City:</label>
<select name="city" id="city" class="form-control">
<option value="hidden">--First--Select--State--</option>
</select>
</div>
</form>
</div>
</div>
</div> <!-- /container -->
</body>
</html>
<?php
include"classCRUD.php";
$obj = new Classcrud;
if(isset($_POST['countryID'])){
$countryID = $_POST['countryID'];
$result = $obj->getalldata("states","*","country_id ='$countryID'");
if($result != FALSE){
?>
<option value="hidden">--Select--State--</option>
<?php
foreach($result as $stateArr){
?>
<option value="<?php if(!empty($stateArr['id']))echo $stateArr['id']?>"><?php if(!empty($stateArr['name']))echo $stateArr['name']?></option>
<?php
}
}
else{
?>
<option value="hidden">--No--State--Available--</option>
<?php
}
}
if(isset($_POST['stateID'])){
$state_id = $_POST['stateID'];
$result = $obj->getalldata("cities","*","state_id ='$state_id'");
if($result != FALSE){
foreach($result as $city){
?>
<option value="<?php if(!empty($city['id']))echo $city['id']?>"><?php if(!empty($city['name']))echo $city['name']?></option>
<?php
}
}
else{
?>
<option value="hidden">--No--State--Available--</option>
<?php
}
}
?>
<script>
$(document).ready(function(e) {
<!--Country state change start-->
$(document).on('change','#country',function(){
var countryID = $("#country").val();
$.ajax({
url: "ajax.php",
type: "POST",
data: {countryID:countryID},
success: function(res){
$("#state").html(res);
}
});
});
<!--Country state change End-->
<!--city state change start-->
$(document).on('change','#state',function(){
var stateID = $("#state").val();
$.ajax({
url: "ajax.php",
type: "POST",
data: {stateID:stateID},
success: function(data){
$("#city").html(data);
}
});
});
<!--city state change start-->
});
</script>
