Filter Records with jQuery load()

Filter student records by class using radio buttons. The selected class is posted to the backend and the returned HTML is placed inside a result container.

Radio Buttons Top ↑

<label>
    <input type="radio"
           name="student_class"
           value="Four">
    Four
</label>

<label>
    <input type="radio"
           name="student_class"
           value="Five">
    Five
</label>

Load Matching Records Top ↑

$( 'input[name="student_class"]' )
    .on( "change", function () {
        $( "#student-list" ).load(
            "student-by-class.php",
            {
                class: $( this ).val()
            }
        );
    });

Backend Query Top ↑

$class = trim(
    $_POST['class'] ?? ''
);

$stmt = $dbo->prepare(
    'SELECT id, name, class, mark
     FROM student
     WHERE class = :class
     ORDER BY name'
);

$stmt->execute([
    'class' => $class
]);

See PDO, student-table SQL dump and radio buttons.

Download original load-class project

Load one record by ID →

Original Source Examples Retained for Migration Reference Top ↑

Original example 1

class1=$("input[name=r1]:checked").val()

Original example 2

$('#d').load('loadck.php?class='+class1);

Original example 3

<script>
$(document).ready(function() {
// Jquery code here ///
$("input[type='radio']").change(function() {
class1=$("input[name=r1]:checked").val()
$('#d').load('loadck.php?class='+class1);
});
///
});
</script>

Original example 4

$class=$_GET['class']; // collect the student class

Original example 5

<?Php
require "config.php"; // database connection details 

///////////////////////////////////////////
$class=$_GET['class']; // collect the student class
//$str='Four';
$query="SELECT * FROM student WHERE class=:class";
$step = $dbo->prepare($query);
$step->bindParam(':class', $class,PDO::PARAM_STR,50);
$step->execute();
$step = $step->fetchAll();
echo "
<table class='table table-striped'> <tr class='table-primary'><th>ID</th>
<th>NAME</th><th>CLSS</th><th>MARK</th></tr>";

foreach ($step as $row) {
echo "<tr ><td>$row[id]</td><td>$row[name]</td>
<td>$row[class]</td><td>$row[mark]</td></tr>";
}

echo "</table>";
?>

Additional Original Learning Routes Top ↑

• http-get.php
• http-post.php

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: