I have a problem with my dynamic dependent select box which I have been trying to solve since morning and I couldn't still solve it. The first select box gets all the regions from the database but the second select box doesn't respond to the first one value and returns nothing, which I really don't know why? I have checked everything including my form, my php code, my database and my scripts and still don't know what is happening. Any help?
Here is my form
<form action="" enctype="multipart/form-data" method="post">
<div class="grid-2">
<div>
<div class="line" style="width: 105%;">
<label class="label" for="regionId">Region *</label>
<div class="selectWrapper">
<select class="select " id="region" name="regionId">
<option value="">Sélectionner la Region</option>
<?php
$getRegion = $region->getAllRegion();
if($getRegion){
while($result = $getRegion->fetch_assoc()){
?>
<option value="<?php echo $result['regionId']; ?>"><?php echo $result['regionName']; ?></option>
<?php } } ?>
</select>
</div>
</div>
</div>
<div>
<div class="line" style="width: 105%;">
<label class="label" for="townId">Ville *</label>
<div class="selectWrapper">
<select class="select" id="town" name="townId">
<option value="">Select Region first</option>
</select>
</div>
</div>
</div>
</div>
<div class="line">
<label class="label" for="phone">Téléphone *</label>
<input type="text" class="input full" name="phone" value=""/>
</div>
<div class="line">
<label class="label" for="Email">Adresse email *</label>
<input type="text" class="input full" name="email" value="" />
</div>
<center><input type="submit" id="create_store_button" class="button-blue full mtm" value="Reserver"></center>
Here is my Ajax Fetch.php
<?php
include '../lib/session.php';
include '../lib/database.php';
include '../helpers/format.php';
include '../helpers/format2.php';
spl_autoload_register(function($class){
include_once "../classes/".$class.".php";
});
$db = new Database();
$fm = new Format();
$region = new Region();
if(!empty($_POST["regionId"])){
$getTown = $region->getAllTown();
if($getTown){
echo '<option value="">Select Town</option>';
while($result = $getTown->fetch_assoc()){
echo '<option value="'.$result['townId'].'">'.$result['townName'].'</option>';
}
}else{
echo '<option value="">Town not available</option>';
}
}
?>
Here is my Javascript
<script>
$(document).ready(function(){
$('#region').on('change',function(){
var regionID = $(this).val();
if(regionID){
$.ajax({
type:'POST',
url:'fetch.php',
data:'regionId='+regionID,
success:function(html){
$('#town').html(html);
}
});
}else{
$('#town').html('<option value="">Select Region first</option>');
}
});
</script>
Here is my PHP Class
<?php
$filepath = realpath(dirname(__FILE__));
include_once ($filepath.'/../lib/database.php');
include_once ($filepath.'/../helpers/format.php');
?>
<?php
class Region{
private $db;
private $fm;
public function __construct(){
$this->db = new Database();
$this->fm = new Format();
}
public function getAllRegion(){
$query = "SELECT * FROM region ORDER BY regionId";
$result = $this->db->select($query);
return $result;
}
public function getAllTown(){
$query = "SELECT * FROM town WHERE regionId = ".$_POST['regionId']." ORDER BY townName ASC";
$result = $this->db->select($query);
return $result;
}
}
?>