0

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&eacute;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&eacute;l&eacute;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;
            }

        }
        ?>
Douggy Budget
  • 53
  • 1
  • 12
  • Hard to say where the problem is. [Turn on PHP error reporting](https://stackoverflow.com/questions/1053424/how-do-i-get-php-errors-to-display). Place some `console.log` statements at different breakpoints in your JS code. Open up your browser's developer tools and go to the Network tab where it shows all your requests (maybe filter only XHR requests). Now try selecting a region again and you should get more information on where it fails by looking at the Console tab and Network tab with all your XHR requests. – Mikey Feb 28 '18 at 18:39
  • Also, `$(document).ready(function(){` is not closed. – Mikey Feb 28 '18 at 18:42
  • ok I will try that – Douggy Budget Feb 28 '18 at 18:47
  • 1
    Ohhhhhhhhhhhhhhhhhh Thank you. It was as you said, it was not closed $(document).ready(function(){. I spent 4 hours checking it but didn't find out. THanks so much man – Douggy Budget Feb 28 '18 at 18:51
  • Nice. No problem. – Mikey Feb 28 '18 at 18:52
  • @Mikey Can I get reference about price estimation using the dynamic dependent select box? like > USA (Country) -> Alaska (State) -> Shipping Cost : $80 – Gem Apr 02 '19 at 06:19

0 Answers0