php table show data from mysql drop down selection - php

Question

simply I have two tables: Course_table and Major_table, and they both have relationship entity. I have created a drop down list and linked it to the Major_table, and an html table linked it to the Course_table. What I want to do is display data on the Course_table based on the selection from the drop down list, but when I select something and press 'Filter' it shows an empty table.
Here is my first code:
<form method="post" action="staff-page.php">
<label for="majorFilter">Select Major: <select id="majorFilter" name="majorFilter">
<option value="0">Select a major</option>
<?php
include ('partials/connectDb.php');
$sql = "SELECT * FROM major_table;";
$run_query = mysqli_query($conn, $sql);
while ($row = mysqli_fetch_array($run_query)) {
$m_id = $row['major_id'];
$m_name = $row['major_name'];
echo "<option value='{$m_id}'>{$m_name}</option>";
}
?>
</select></label>
<Button type="button" name="filter" id="filter">Filter</Button>
</form>
And this is my second code:
<table style="height: 400px; width: 600px; overflow: auto; display: none;" id="courseTable">
<caption>Course Table</caption>
<thead>
<tr>
<th>Name</th>
<th>Code</th>
<th style="padding-right: 10px;">Cr</th>
<th>Major</th>
<th>Students Enrolled</th>
</tr>
</thead>
<?php
error_reporting(0);
$conn = mysqli_connect('localhost', 'root', '', 'srs-db') or die('ERROR: Cannot Connect='.mysql_error($conn));
$query = "SELECT course_table.course_name, course_table.course_code, course_table.cr, major_table.major_name, course_table.students_enrolled FROM course_table
INNER JOIN major_table ON course_table.major = major_table.major_id
WHERE course_table.major = '$m_id';";
$sql = mysqli_query($conn, $query);
while ($course = mysqli_fetch_array($sql)) {
# code...
echo "<tr>";
echo "<td>.$course[course_name].</td>";
echo "<td>.$course[course_code].</td>";
echo "<td>.$course[cr].</td>";
echo "<td>.$course[major_name].</td>";
echo "<td>.$course[students_enrolled].</td>";
echo "</tr>";
}
?>
</table>
Your help is much appreciated :)

Answer 1

In your second code, you need to make your <tr> id based and apply a class for all of them. like this:
while ($course = mysqli_fetch_array($sql)) {
# code...
echo "<tr class='all_trs' id='display_".$m_id."' style='display:none;'>";
echo "<td>.$course[course_name].</td>";
echo "<td>.$course[course_code].</td>";
echo "<td>.$course[cr].</td>";
echo "<td>.$course[major_name].</td>";
echo "<td>.$course[students_enrolled].</td>";
echo "</tr>";
}
And then you need to place a JQuery Onchange method in Document ready:
<script type="text/javascript">
$(function() {
// will be triggered on Change of your Select box
$( "#majorFilter" ).change(function() {
alert("Select Box changed");
// Hiding all Trs by default.
$( ".all_trs" ).hide();
// Showing just the specific TR which is selected in select box
$( "#display_" + $(this).val() ).show();
});
});
</script>
You might notice, that I have used display:none for echoing the <tr> html, it is because, I'm hiding all the TRs by default and will display only the selected one on Select Box change.