Add/Show dynamic form fields depending on select value

Question

I am using Jquery Mobile to create a popup form that displays select statements for the users to select. I am using ajax to make the select statements dynamic. I have gotten the data to display and create a new select statement. It just does not seem to be formatting correctly.

Picture of The Form with before and After

Popup Form Code

<?php
$q = intval($_GET['q']);

include_once('session.php');
include_once('dbConnect.php');

$sql="SELECT Enrollment.c_id, Enrollment.s_id, users.f_name, users.l_name
FROM Enrollment
INNER JOIN users ON Enrollment.s_id = users.s_id
WHERE c_id=$q";

$result = mysqli_query($dbc, $sql);

echo "<label for='selectuser' class='select'>Select user:</label>";
echo "<select name='selectuser' id='selectuser' data-native-menu='false'>";
echo "<option>Choose Users:</option>";
echo "<option value='instructor'>All Instructors</option>";
echo "<option value='students'>All Students</option>";

while($row = mysqli_fetch_array($result))
  {
        $s_id = $row['s_id'];
        $f_name = $row['f_name'];
        $l_name = $row['l_name'];
        echo "<option value='$s_id'>$f_name $l_name</option>";
  }
echo "</select>";
?>

Answer 1

An easier way to approach this is the following:

HTML

First off, put all of your select boxes in your html from the start:

<select name="selectclass" id="selectclass" data-native-menu="false">
   <option value='default'>Select Class:</option>
   <?php echo $allClassOptions; ?>
</select>
<select name="selectuser" id="selectuser" data-native-menu="false">
   <option value='default'>Select User:</option>
   <?php echo $allUsers; ?>
</select>

It is good practice to provide an alternative for users without javascript (graceful degration).

Javascript

Then, in your javascript file, hide the input fields that should be hidden at the start. Bind an event handler to the change event of the first select field, and use an Ajax call to populate the option fields of the second select field.

var selectElement = $("#selectuser");
selectElement.hide();

$("#selectclass").on("change", function(){
    var selectedClass = this.value;

    if(selectedClass != "default"){
       selectElement.show();

       $.ajax({
           type: "POST",
           url: "getdatabaseresults.php",
           data: {"class": selectedClass },
           success: function(result){
                //remove old options
                selectElement.empty();

                //add new options
                selectElement.append(result);
           }
       });
    };
});

PHP

In your PHP file, handle the Ajax call and return the wanted results:

<?php

if(isset($_SERVER["HTTP_X_REQUESTED_WITH"]) && strtolower($_SERVER["HTTP_X_REQUESTED_WITH"]) == "xmlhttprequest"){
    //this is an Ajax call!

    $selectedClass = $_POST["class"];
    $options = "<option value='default'>Select User:</option>";

    //do whatever you want with the data
    //database calls and whatnot
    $stmt = mysqli_prepare($dbc, "SELECT * FROM users WHERE c_id = ?");
    mysqli_stmt_bind_param($stmt, "s", $selectedClass);
    mysqli_stmt_execute($stmt);
    mysqli_stmt_bind_result($stmt, $row);
    while(mysqli_stmt_fetch($stmt)) {
        $user = $row['username'];
        $options.= "<option value='$user'>$user</option>";
    }
    mysqli_stmt_close($stmt);

    echo $options;
}
?>

This php file can be expanded (with a switch() for example) so it can be used for different ajax calls.

Note: There are many different ways to achieve this, this is just one example.