I am trying to create a search box where the option selected from 'box1' populates the options available for 'box2'. The options for both boxes are given from my MYSQL database. My problem is that I do not know how to perform a query based on the first query without refreshing the page which would be tedious and annoying.
HTML / PHP
<form role="form" action="search.php" method="GET">
<div class="col-md-3">
<select class="form-control">
<?php
$result = mysqli_query($con,"SELECT `name` FROM school");
while($row = mysqli_fetch_array($result)) {
echo '<option name="'.$row['name'].'">'.$row['name'].' School</option>';
}
?>
</select>
</div>
<div class="col-md-3">
<select class="form-control">
<?php
$result = mysqli_query($con,"SELECT * FROM products");
while($row = mysqli_fetch_array($result)) {
echo '<option name="'.$row['product'].'">'.$row['product'].'</option>';
}
mysqli_close($con);
?>
</select>
</div>
<button type="submit" class="btn btn-info">Search</button>
</form>
I think that the query would go something like this. AJAX may be the solution to this problem but I am unsure how to use AJAX to perform this query without refreshing.
SELECT `product` FROM products WHERE `school` = [SCHOOL NAME FROM BOX 1]
Thanks in advance!