11-Apr-2023
.
Admin
Hi Dev,
In this blog, I will learn you how to dynamic populate category and subcategory in the dropdown in PHP MySQL using Ajax. This turorial will give you category subcategory dropdown in php mysql ajax.
This tutorial will help you step by step on how to implement a dynamic category and subcategory dropdown list onchange in PHP MySQL using Ajax or populate the second dropdown based on the first PHP. As well as learn, how to fetch data from the database in the dropdown list in PHP using jQuery ajax.
Here i will give you full example for how to dynamic populate category and subcategory in the dropdown in PHP MySQL using Ajax. So let's see the bellow example step by step.
Step 1 : Create Table
In the first step, You can open your database and run the bellow sql query to create category table into the database.
CREATE TABLE `categories` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`parent_id` int(11) NOT NULL DEFAULT '0',
`category` varchar(255) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
Step 2 : Insert some record
In this step you will insert some record in categories table run the following sql query.
INSERT INTO `categories` (`id`, `parent_id`, `category`) VALUES
(1, 0, 'PHP'),
(2, 0, 'HTML'),
(3, 1, 'Laravel'),
(4, 1, 'Wordpress'),
(5, 1, 'Codeigniter');
Step 3 : Create DB Connection File
In this step you can create db connection file as config.php and fill the bellow database information.
config.php
<?php
$servername = 'localhost';
$username = 'root'; // Username
$password = ''; // Password
$dbname = "db_name";
$conn = mysqli_connect($servername,$username,$password,"$dbname");
if(!$conn){
die('Could not Connect MySql Server:' .mysql_error());
}
?>
Step 4 : Create Category Dropdown Form
Here you will create two dropdown one is category and second one is sub category create index.php file put the bellow code.
index.php
<?php
include "config.php";
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" integrity="sha512-oc9+XSs1H243/FRN9Rw62Fn8EtxjEYWHXRvjS43YtueEewbS6ObfXcJNyohjHqVKFPoXXUxwc+q1K7Dee6vv9g==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row mt-5">
<div class="col-md-8 offset-2 mt-5">
<div class="card mt-5">
<div class="card-header bg-primary text-white">
<h4><b>Category Subcategory Dropdown in PHP MySQL Ajax - NiceSnippets.com</b></h4>
</div>
<div class="card-body">
<form>
<div class="form-group">
<label for="CATEGORY-DROPDOWN">Category</label>
<select class="form-control" id="category-dropdown">
<option value="">Select Category</option>
<?php
$result = mysqli_query($conn,"SELECT * FROM categories where sub_cat_id = 0");
while($row = mysqli_fetch_array($result)) {
?>
<option value="<?php echo $row['id'];?>"><?php echo $row["category"];?></option>
<?php
}
?>
</select>
</div>
<div class="form-group">
<label for="SUBCATEGORY">Sub Category</label>
<select class="form-control" id="sub-category-dropdown">
<option value="">Select Sub Category</option>
</select>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('#category-dropdown').on('change', function() {
var category_id = this.value;
$.ajax({
url: "get-subcat.php",
type: "POST",
data: {
category_id: category_id
},
cache: false,
success: function(result){
$("#sub-category-dropdown").html(result);
}
});
});
});
</script>
</body>
</html>
Step 5 : Fetch Sub Category
In this step we have to fetch sub category and create get-subcat.php file and put the bellow code.
get-subcat.php
<?php
include "config.php";
$category_id = $_POST["category_id"];
$result = mysqli_query($conn,"SELECT * FROM categories where sub_cat_id = $category_id");
?>
<option value="">Select Sub Category</option>
<?php
while($row = mysqli_fetch_array($result)) {
?>
<option value="<?php echo $row["id"];?>"><?php echo $row["category"];?></option>
<?php
}
?>
It will help you...
#Jquery
#PHP
