2 Формы (выберите) - 1 зависит от 2

Question

Я хочу создать форму в html + php. У меня есть две таблицы в моей базе данных.

1. Категории: id_category, категория
2. Dairy: id_dairy, id_category, product_name

А теперь вопрос. Как создать 1 форму с выпадающими списками 2 select. Возможно ли это сделать на PHP без AJAX?

Я имею в виду, что - я хочу выбрать категорию, а затем выбрать Продукты без страницы обновления.

Код:

<form role="form" action="kalorie.php" method="post"> 
     <div class="form-group"> 
     <label for="kategoria">Kategoria:</label> 
     <select class="form-control" name="kategoria"> 
      <option>Wybierz kategorie</option> 
      <?php 
       $sql_1 = "SELECT * FROM produkty"; 
       $result_1 = mysqli_query($conn, $sql_1); 

       while($row_1 = mysqli_fetch_assoc($result_1)) { 
       echo '<option>'.$row_1["produkt"].'</option>'; 
       } 

       $kat = $_POST['kategoria']; 
      ?> 
     </select> 
     <select class="form-control" name="produkt"> 
      <option>Wybierz produkt</option> 
      <?php 
       $sql_2 = "SELECT * FROM $kat"; 
       $result_2 = mysqli_query($conn, $sql_2); 

       while($row_2 = mysqli_fetch_assoc($result_2)) { 
       echo '<option>'.$row_2["produkty"].'</option>'; 
       } 
      ?> 
     </select> 
     </div> 
     <button type="submit" class="btn btn-default" name="oblicz">Wyślij</button> 
    </form> 

Answer 1

Ajax является лучшим решением для этого. Но если вы хотите альтернативу, вы можете использовать «iframe» и представить форму ypur в этом фрейме.

Answer 2

решение Non Ajax:

Загрузите подкатегории продукта в объект JavaScript шпонки по категории ид. Когда категория изменена в списке выбора категории, замените параметры в списке продуктов.

<script> 
var produkts = { 
<?php 
$sql_2 = "SELECT * FROM $kat"; 
$result_2 = mysqli_query($conn, $sql_2); 

$id_category = 0; 
list($delim1, $delim2) = array('', ''); 
while($row_2 = mysqli_fetch_assoc($result_2)) { 
    $delim2 = '"'; 
    $row_2 = $row['value']; 
    if ($id_category != $row_2['id_category']) { 
     $id_category = $row_2['id_category']; 
     echo $delim1 . $id_category . ': "'; 
     $delim1 = '", '; 
    } 
    echo '<option>' . $row_2['produkty'] . '</option>'; 
} 
echo $delim2; 

?> 
}; 
// example: {1: "<option>cheese</option><option>butter</option>", 2: "<option>ice cream</option>"} 
</script> 

<form role="form" action="kalorie.php" method="post"> 
    <div class="form-group"> 
    <label for="kategoria">Kategoria:</label> 
    <select class="form-control" name="kategoria"> 
     <option>Wybierz kategorie</option> 
     <option value="1">Me</option> 
     <option value="2">You</option> 
     <?php 
      $sql_1 = "SELECT * FROM produkty"; 
      $result_1 = mysqli_query($conn, $sql_1); 

      while($row_1 = mysqli_fetch_assoc($result_1)) { 
      echo '<option>'.$row_1["produkt"].'</option>'; 
      } 

      $kat = $_POST['kategoria']; 
     ?> 
    </select> 
    <select class="form-control" name="produkt"> 
     <option>Wybierz produkt</option> 
    </select> 
    </div> 
    <button type="submit" class="btn btn-default" name="oblicz">Wyślij</button> 
</form> 

<script> 

document.querySelector('select[name=kategoria]').addEventListener('change', function (evt) { 
    var kat = evt.target; 
    var kat_sel = kat.options[kat.selectedIndex].value 
    document.querySelector('select[name=produkt]').innerHTML = produkts[kat_sel]; 
}) 

</script> 

Mocked up JSFiddle demo.