How to select option from select list, that then changes the second select list, depending on database records?

Question

I have a form with several select drop down lists. The first option should be selected (Summer, Spring or Winter) and the second drop-down list will then show the students attending classes in this period.

I am currently using a PHP variable (which holds the first selection) in the sql request to the PHP - this may be my problem, but I can't see a solution for the life of me.

I'm open to all ideas. I've looked at a few similar problems already on StackOverflow but none seem to fit my problem.

<div class="form-group col-md-12">
    <select name="classe" id="classe" class="form-control">
        <option value="">Sélectionnez la classe</option>
        <?php
        while ($rows = $result->fetch_assoc()) {
            $classe = $rows['classe'];
            echo "<option value='$classe'>$classe</option>";
        }
        ?>
    </select>
</div>
<div class="form-group col-md-12">
    <select name="etudiant" id="etudiant" class="form-control">
        <option value="">Sélectionnez l'étudiant'</option>
        <?php
        while ($rows3 = $result3->fetch_assoc()) {
            $etudiant = $rows3['name'];
            echo "<option value='" . $rows3['id'] . "'>$etudiant</option>";
        }
        ?>
    </select>
</div>


$classe = filter_input(INPUT_POST, "classe");
$askEtudiant = new mysqli('localhost', 'root', '', 'attendance');
$result3 = $askEtudiant->query("SELECT id, name FROM users WHERE role = 'etudiant' AND classe = '$classe'");

I haven't included the conncetion info because I can see that works.

The first select list is called "classe" and has the time of year the students are on campus.

The second list "etudiant should list those students in the database that are registered for the period selected previously.

FOR INFO: The results I currently get back in the second drop down list is the one student "etudiant" that doesn't have a period (Summer, etc) assigned to him in the database!

Thanks in advance for any help...

Answer 1

Its called cascading dropdowns.

Basically, you will want to fire an AJAX call on the onChange event of the first dropdown and populate the second dropdown from the API response.

Answer 2

SOLUTION SCRIPT IN HTML FILE
function showUser(str) { if (str == "") { document.getElementById("etudiant").innerHTML = ""; return; } if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("etudiant").innerHTML = this.responseText; } } xmlhttp.open("GET", "getUsers.php?q=" + str, true); xmlhttp.send(); }

SEPERATE FILE 
<?php
require_once("connection.php");
$id =  $_GET["q"];

$result3 = "SELECT id, name FROM users WHERE classe = :classe";
$stmt = $conn->prepare($result3);
$stmt->bindParam(":classe", $_GET['q']);
$stmt->execute();
$users = $stmt->fetchAll();
echo "<option value=\"\">Sélectionnez l'étudiant'</option>";

foreach ($users as $key => $value) {
echo "<option value='" . $value['id'] . "'>" . $value['name'] . "</option>";
}