I have 2 dropdown boxes namely “state” & “city”, so when i click on state i should see all cities under that specific state. I can get record from databse for states but for cities its not working, please help, my database table and php, Ajax Jquery code is below.
1). test.php
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name ="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<!-- Popper JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<title>DEPENDANT DROP DOWN</title>
<script type="text/javascript">
$(document).ready(function(){
$("#State").change(function(){
var state_id=$(this).val();
$.ajax({
url:"testpro.php",
method:"POST",
data:{stateID:state_id},
success:function(data){
$("#city").html(data);
}
});
});
});
</script>
</head>
<body>
<div class="container col">
<br>
<form method="POST" action="loan.php">
<div class="form-row mb-2">
<div class="col1">
<span class="border-lable-flt">
<select class="form-control" selected name="" id="state" required="true">
<option selected>--Select State--</option>
<?php
include 'config.php';
$sql = "SELECT * FROM demo_state ORDER BY name";
$result = mysqli_query($conn,$sql);
while($row=mysqli_fetch_array($result))
{
?>
<option value="<?php echo $row['id']; ?>"><?php echo $row['name']; ?></option>
<?php } ?>
</select>
</span>
</div>
<div class="col1">
<span class="border-lable-flt">
<select class="form-control" selected name="" id="city" required="true">
<option selected>--Select City--</option>
</select>
</span>
</div>
</div>
<div>
<input type="submit" value="Submit" class="btn btn-success">
</div>
</form>
<br>
</div>
<br>
</body>
</html>2). testpro.php
<?php
include 'config.php';
$output = "";
$sql = "SELECT * FROM demo_cities WHERE state_id='".$_POST['stateID']."' ORDER BY name";
$result = mysqli_query($conn,$sql);
$output .='<option value="" disabled selected>-select City-</option>';
while($row=mysqli_fetch_array($result))
{
$output .='<option value="'.$row['id'].'">'.$row['name'].'</option>';
}
echo $output;
?>3). config.php
<?php
$conn=mysqli_connect('localhost','root','','db_dropdown');
if(!conn)
{
die("Could Not Connect to Database : ".mysqli_connect_error());
}
?>4). database tables.
CREATE TABLE `demo_cities` (
`id` int(11) NOT NULL,
`state_id` int(12) NOT NULL,
`name` varchar(155) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
INSERT INTO `demo_cities` (`id`, `state_id`, `name`) VALUES
(1, 1, 'Lusaka'),
(2, 2, 'Lilongwe'),
(3, 3, 'Luanda'),
(4, 14, 'Gaborone');
CREATE TABLE `demo_state` (
`id` int(11) NOT NULL,
`name` varchar(155) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
INSERT INTO `demo_state` (`id`, `name`) VALUES
(1, 'zambia'),
(2, 'Malawi'),
(3, 'Angola'),
(4, 'Botswan');