Filter data with Dropdown selection using AJAX
- Tech Area
- October 15, 2023
In this tutorial, We will learn how to filter data using Jquery AJAX in PHP and MySQL. We are using dropdown to filter data from mysql database on select value using AJAX.
Files used in this tutorial:
1- connection.php (database connection file)
2- index.php (table and AJAX script)
3- show-data.php (fetch and show data from database)
4- select-data.php (filter data from database)
Below are the step by step process of how to filter data with dropdown using Jquery AJAX.
Step 1: Create a Database connection
In this step, create a new file connection.php to create database connection.
connection.php
<?php
$server = "localhost";
$username = "root";
$password = "";
$database = "college_db";
$connection = mysqli_connect("$server","$username","$password");
$select_db = mysqli_select_db($connection, $database);
if(!$select_db)
{
echo("connection terminated");
}
?>Step 2: Create index.php
In this step, create a new file index.php. This is the main file used to implement AJAX to filter data with dropdown and show data into the table.
This screenshot shows the fetched data in table and dropdown.
index.php
<html>
<head>
<title>Registration Form</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</head>
<style>
.box
{
width:10%;
float: left;
}
</style>
<body>
<div class="container">
<h2 class="text-center">Filter Data with Dropdown Select using Jquery AJAX</h2>
<br/>
<div class="box">
<div class="form-group">
<select class="form-control" onchange="selectdata(this.options[this.selectedIndex].value)">
<option value="All">All</option>
<option value="PhD">PhD</option>
<option value="PDF">PDF</option>
</select>
</div>
</div>
<table class="table table-bordered table-striped">
<thead style="background-color:#e3a53a;">
<th>Id</th>
<th>Name</th>
<th>Email</th>
<th>Category</th>
<th>Phone</th>
<th>Address</th>
</thead>
<tbody id="result">
</tbody>
</table>
</div>
</body>
</html>Now use jquery AJAX script.
<script type="text/javascript">
$(document).ready(function(){
showdata();
});
function showdata()
{
$.ajax({
url: 'show-data.php',
method: 'post',
success: function(result)
{
$("#result").html(result);
}
});
}
function selectdata(cat)
{
$.ajax({
url: 'select-data.php',
method: 'post',
data: 'cat_name='+cat,
success: function(result)
{
$("#result").html(result);
}
});
}
</script>Step 3: Create new file for fetch data
In this step, create a new file show-data.php. This file used to fetch data from database into the table.
show-data.php
<?php
include("connection.php");
$fetch_query = mysqli_query($connection, "select * from tbl_registration");
$row = mysqli_num_rows($fetch_query);
if($row>0)
{
while($res = mysqli_fetch_array($fetch_query))
{?>
<tr>
<td><?php echo $res['id']; ?></td>
<td><?php echo $res['name']; ?></td>
<td><?php echo $res['email']; ?></td>
<td><?php echo $res['category']; ?></td>
<td><?php echo $res['phone']; ?></td>
<td><?php echo $res['address']; ?></td>
</tr>
<?php }
}
?>Step 4: Create new file for filter data
In this step, create a new file select-data.php. This file used to filter data with dropdown from the database.
select-data.php
<?php
include('connection.php');
$catname = $_POST['cat_name'];
if($catname!='All')
{
$cond = "'$catname'";
}
else
{
$cond = 0;
}
$fetch_query = mysqli_query($connection, "select * from tbl_registration where category= $cond");
$row = mysqli_num_rows($fetch_query);
if($row>0)
{
while($res = mysqli_fetch_array($fetch_query))
{?>
<tr>
<td><?php echo $res['id']; ?></td>
<td><?php echo $res['name']; ?></td>
<td><?php echo $res['email']; ?></td>
<td><?php echo $res['category']; ?></td>
<td><?php echo $res['phone']; ?></td>
<td><?php echo $res['address']; ?></td>
</tr>
<?php }
}
?>Download Source Code
Join 10,000+ subscriber