JQuery filter student table based on class data by using radio buttons and load() function with DEMO

Student records will be displayed here.

Select above Radio button to pass the class data to backend PHP script to collect records from MySQL table

  • Video Tutorial load() : matching records

Main file showing radio buttons with JQuery code to pass the data to backend php file and display the output.
Php file to collect data from load.html file ( class name ) and return the matching rows from MySQL database
Database connection file, update your database login details here.
SQL dump of sample student table. Use this to create your sample student table

Video Tutorial on LOAD function
In our student table there are 35 records. Each student have one class column having data from class Three to class Nine.

By using radio buttons we will select one of the available classes and this selection will be collected on any change in selection of radio buttons ( change event ).
This data ( about the class selection by user ) is stored in a variable and same is passed to our backend script loadck.php file using load() function.
Here is the complete JQuery code.
$(document).ready(function() {
// Jquery code here ///
$("input[type='radio']").change(function() {
With this code our data in terms of selection of user ( from class three to class Nine ) will be passed to backend PHP script loadck.php. Inside this loadck.php first we will collect the filter data posted from our front end JQuery code.
$class=$_GET['class']; // collect the student class
This variable $class will be used in our PHP script to filter the rows from MySQL table using PDO database connection. The code for our backend PHP script is here.
require "config.php"; // database connection details 

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

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

echo "</table>";

load() DEMO of fetching record details by using load() function
HTTP GET Method HTTP POST method


* indicates required
Subscribe to plus2net


    Post your comments , suggestion , error , requirements etc here .

    Most Popular JQuery Scripts


    Two dependant list boxes


    Calendar with Date Selection


    Data change by Slider


    Show & Hide element

    JQuery Video Tutorials

    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer