2 Forms (select) - 1 is dependent from 2 - php

Question

I want create form in html+php. I have got 2 tables in my database.
Categories: id_category, category
Dairy: id_dairy, id_category, product_name
And now is question. How can I create 1 form with 2 select dropdowns. Is it possible to do it in PHP without AJAX?
I mean that - I want choose Category and then choose Products without refresh page.
Code:
<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 is best solution for this.
But if you want an alternative than you can use "iframe" and submit ypur form in that frame.

Answer 2

Non Ajax solution:
Load your product subcategories into a JavaScript object keyed by the category id. When the category is changed in the category select list, swap out the options in the product list.
<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.