JQuery load filtered records from MySQL table using load() on selection of radio buttons

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

Download the ZIP file of the full code at the end of this tutorial.

load.html

Main file showing radio buttons with JQuery code to pass the data to backend php file and display the output.

loadck.php

Php file to collect data from load.html file ( class name ) and return the matching rows from MySQL database

config.php

Database connection file, update your database login details here.

sql-dump.txt

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 ).

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

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.

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

Here is the complete JQuery code.

<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>

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.

<?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>";
?>

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

This article is written by plus2net.com team.

plus2net.com

Most Popular JQuery Scripts
1	Two dependant list boxes
2	Calendar with Date Selection
3	Data change by Slider
4	Show & Hide element

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

Video Tutorial load() : matching records

Subscribe

1

2

3

4