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



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


plus2net.com



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







Most Popular JQuery Scripts

1

Two dependant list boxes

2

Calendar with Date Selection

3

Data change by Slider

4

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-2020 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer