I have been struggling to get this to work but no success. Researched many tutorials and videos but still not working.
I have a Region Table in my DB with region_id(PK) and region_name as columns.
I also Center Table with center_id(PK), center_name and region_id(FK)
region_id is foreign key on center table
I have the register.php file that fetches the datafrom DB and Ajax.php
It's only the select dropdown of region that's working. The Centers under the selected region will not display in the Center Select dropdown.
Register.php
<?php
session_start();
require_once $_SERVER['DOCUMENT_ROOT'] . '/soap/includes/server.php';
?>
<html>
<body>
<div class="p-t-31 p-b-9">
<span class="txt1">
Region
</span>
</div>
<div class="wrap-input100 validate-input" data-validate
= "Region is required">
<span class="focus-input100"></span>
<select class='input100' name='region'>
<option value disabled selected>Select
Region</option>
<?php
$sql = mysqli_query($con,"SELECT * FROM
region");
while($row=mysqli_fetch_array($sql))
{
echo '<option
value="'.$row['region_id'].'">'.$row['region_name'].'</option>';
}
?>
</select>
</div>
<br>
<span class="error"><?php echo $regionError;?></span>
<div class="p-t-31 p-b-9">
<span class="txt1">
Center
</span>
</div>
<div class="wrap-input100 validate-input" data-validate
= "Center is required">
<span class="focus-input100"></span>
<select class='input100' name='center'>
<option value="">Select Center</option>
</select>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function()
{
$(".region").change(function()
{
var region_id=$(this).val();
var post_id = 'id='+ region_id;
$.ajax
({
type: "POST",
url: "ajax.php",
data: post_id,
cache: false,
success: function(centers)
{
$(".center").html(centers);
}
});
});
});
</script>
</div>
<br>
<span class="error"><?php echo $centerError;?></span>
Ajax.php
<?php
require_once $_SERVER['DOCUMENT_ROOT'] . '/soap/includes/server.php';
if($_POST['id']){
$id=$_POST['id'];
if($id==0){
echo "<option>Select Center</option>";
}else{
$sql = mysqli_query($con,"SELECT * FROM center WHERE
region_id='$id'");
while($row = mysqli_fetch_array($sql)){
echo '<option
value="'.$row['center_id'].'">'.$row['center_name'].'</option>';
}
}
}
?>
</body>
</html>
