PHP / Jquery проблема заполнения 3 динамических c поля выбора

Question

Я довольно новичок в PHP и JQuery и борюсь с 3 динамическими c полями выбора. Первый должен содержать список моих инструментов. Второй - список категорий, а третий - список подкатегорий, основанный на выбранном значении категории и выбранном инструменте. Я следовал нескольким замечательным учебникам по этому вопросу, но ни один из них не показался именно тем, что мне нужно. До сих пор удалось правильно заполнить инструменты и поле выбора категорий, но при нажатии на поле выбора категорий, чтобы выбрать нужное значение, оно выходит из строя, поле подкатегорий остается пустым. Я полагаю, что проблема заключается в том, что я не отправляю toolID правильно, когда происходит обмен категориями, но не могу найти, как правильно отправить его. Кто-нибудь может мне помочь ? Это мой код:

<?php
    $query = "SELECT * FROM instruments ORDER BY name ASC";
    $result = $db->query($query)->results();
  ?>
<div class = "form-group col-md-3>"
  <select name="instrument_id" id="instrument_id">
    <option value="">-Select Instrument-</option>
    <?php
      foreach($result as $row){
        echo '<option value="'.$row->id.'">'.$row->name.'</option>';
      }
    ?>
</select>
</div>
<div class="form-group col-md-3">
      <label for="category_id" class="control-label">Category</label>
      <select id="category_id" name="category_id" class="form-control input-sm">
        <option value="">-Select Category-</option>
      </select>

</div>
<div class="form-group col-md-3">
  <label for="subcategory_id" class="control-label">Subcategory</label>
  <select id="subcategory_id" name="subcategory_id" class="form-control input-sm">
    <option value="">-Select Subcategory-</option>
  </select>
</div>

    <script>
$(document).ready(function(){
$('#instrument_id').on('change', function(){
    const instrumentID = $(this).val();
    if(instrumentID){
        $.ajax({
            type:'POST',
            url:'<?=PROOT?>admindocuments/get_categories',
            data:{instrument_id: instrumentID},
            success:function(html){
                $('#category_id').html(html);
                $('#subcategory_id').html('<option value="">-Select  Subcategory-</option>');
            }
        });
    }else{
            $('#category_id').html('<option value="">-Select Category-   </option>');
        $('#subcategory_id').html('<option value="">-Select Subcategory-  </option>');
    }
});

$('#category_id').on('change', function(){
    const categoryID = $(this).val();
    const instrumentID = $('#instrument_id').val();
    if(categoryID){
        $.ajax({
            type:'POST',
            url:'<?=PROOT?>admindocuments/get_subcategories',
            data: {
              category_id: categoryID,
              instrument_id: instrumentID,
            },
            success:function(html){
                $('#subcategory_id').html(html);
            }
        });
    }else{
        $('#subcategory_id').html('<option value="">-Select Subcategory-      </option>');
    }
  });
});
</script>

И это код в моих get_categories. php и get_subcategories. php file:

get_categories :
<?php    
  if($_POST["instrument_id"]){
  $query = "SELECT * FROM categories ORDER BY name ASC";
    $result = $db->query($query)->results();
    echo '<option value="">-Select Category-</option>';
    foreach($result as $row){
    echo '<option value="'.$row->id.'">'.$row->name.'</option>';
  }
}
?>

get_subcategories:

<?php
    if($_POST["category_id"] && !empty($_POST["instrument_id"])){
  $query = "SELECT * FROM subcategories WHERE category_id =  ".$_POST['category_id']." AND instrument_id = ".$_POST['instrument_id']."  ORDER BY name ASC";
      $result = $db->query($query)->results();
    echo '<option value="">-Select Subcategory-</option>';
    foreach($result as $row){
      echo '<option value="'.$row->id.'">'.$row->name.'</option>';
    }
}

Что я делаю не так? Пожалуйста, помогите мне. С уважением

Answer 1

* * root вашей проблемы заключается в том, что вы вообще не отправляете идентификатор инструмента при получении подкатегорий. Сначала вам нужно получить его в вашем обработчике, так как ваш select имеет идентификатор, это просто:

$('#category_id').on('change', function(){
    const categoryID = $(this).val(); // I changed var to const here, read more about it below
    const instrumentID = $('#instrument_id').val(); // this line added

Здесь вы можете прочитать об использовании const и let более var.

А затем вам нужно отправить его в AJAX data:

// sending it as an object is more readable and PHP reads it just the same
data: {
    category_id: categoryID,
    instrument_id: instrumentID,
}

Теперь вам также нужно исправить свою сторону PHP. В настоящее время, если вы отправляете данные такого рода, ваша первая ветвь будет активирована, потому что идентификатор инструмента установлен в обоих случаях:

if (!empty($_POST["instrument_id"])) {
    // get categories
} elseif(!empty($_POST["category_id"])) {
    // get subcategories
}

Вместо этого вы должны проверить, если оба устанавливаются параметры (именно так вы определяете, что вам нужны подкатегории):

if (!empty($_POST["instrument_id"]) && !empty($_POST["category_id"])) {
    // get subcategories
} elseif (!empty($_POST["category_id"]) && empty($_POST["instrument_id"])) {
    // get categories
}

Но гораздо более чистым решением было бы просто иметь два PHP сценария, один для категорий и один для подкатегорий. Тогда вам не понадобится эта сложная if-elseif структура, и ваши задачи будут логически разделены (в настоящее время вы используете файл с именем get_subcategories, чтобы получить обе подкатегории и категорий, поэтому это не так. действительно удачно назван).

Еще одна вещь, которую вы должны избегать любой ценой, это создание запросов путем прямой вставки параметров:

$query = "SELECT * FROM subcategories WHERE category_id = ".$_POST['category_id']." AND instrument_id = ".$_POST['instrument_id']." ORDER BY name ASC";

Этот вид практики оставляет вас широко открытыми для SQL инъекция . Вместо этого вы должны использовать подготовленные заявления .