Scribd
Upload
285 views

Dynamic Dependent Dropdown Using PHP and MySQLi

This document discusses creating a dynamic dependent dropdown using PHP and MySQLi. It includes: 1. Creating a database table with categories and subcategories 2. Configuring the database connection 3. Coding the dynamic dependent dropdown with PHP 4. Adding CSS styling for the dropdown boxes

Uploaded by

sudharsonkumar
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
285 views

Dynamic Dependent Dropdown Using PHP and MySQLi

This document discusses creating a dynamic dependent dropdown using PHP and MySQLi. It includes: 1. Creating a database table with categories and subcategories 2. Configuring the database connection 3. Coding the dynamic dependent dropdown with PHP 4. Adding CSS styling for the dropdown boxes

Uploaded by

sudharsonkumar
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 8

Dynamic Dependent Dropdown using PHP and MySQLi

Create Database for Dynamic Dependent Dropdown

CREATE TABLE `category` (

`studentid` int(10) UNSIGNED NOT NULL,

`studentname` varchar(50) COLLATE latin1_general_ci NOT NULL,

`gender` varchar(255) COLLATE latin1_general_ci NOT NULL,

`branch` int(10) UNSIGNED NOT NULL DEFAULT '0',

`proctor` int(11) NOT NULL DEFAULT '0'

) ENGINE=InnoDB DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci;

INSERT INTO `category` (`studentid`, `studentname`, `gender`, `branch`, `proctor`) VALUES

(1, 'Home', 'home', 0, 0),

(2, 'Tutorials', 'tutorials', 0, 1),

(3, 'PHP', 'PHP is a server scripting language, and a powerful tool for making dynamic and interactive', 2,
1),

(4, 'C Language', 'C is a general-purpose, high-level language that was originally developed by Dennis M.
Ritchie', 2, 1),

(5, 'Frameworks', 'frameworks', 0, 2),

(6, 'Laravel', 'Laravel is a PHP web application framework with expressive, elegant syntax, aiming to take
the pain out of web development.', 5, 2),

(7, 'CodeIgniter', 'CodeIgniter is a powerful PHP framework with a small footprint, built for those who
required a simple, yet elegant toolkit', 5, 2),

(8, 'CakePHP', 'CakePHP enables you to build web applications faster, using code generation features to
rapidly build prototypes.', 5, 2),

(9, 'Symfony', 'Symfony is a PHP framework to speed up the creation and maintenance of your web
applications.', 5, 2),

(10, 'Websites', 'websites', 0, 3),


(11, 'Technopoints.co.in', 'Technopoints is blog provides tutorials on php and other programming
languages for beginners.', 10, 3),

(12, 'Softglobe.net', 'The Web development,Android development and Technology Company in India',
10, 3);

2. Database Configuration

<?php

$con = mysqli_connect("localhost","root","","technopoints");

// Check connection

if (mysqli_connect_errno())

echo "Failed to connect to MySQL: " . mysqli_connect_error();

?>

3. Code for Dynamic Dependent Dropdown

<?php

require 'dbconfig.php';

$pmenu = $cmenu = null;

if (isset($_GET["pcat"]) && is_numeric($_GET["pcat"])) {

$pmenu = $_GET["pcat"];

if (isset($_POST['submit'])) {

if (isset($_POST['ccat'])) {

$pmenu = $_POST['pcat'];

if (isset($_POST['ccat']) && is_numeric($_POST['ccat'])) {

$cmenu = $_POST['ccat'];
}

?>

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

<title>Dependent dropdown in PHP, MySQLi</title>

<script type="text/javascript">

function autoSubmit()

with (window.document.form) {

if (pcat.selectedIndex === 0) {

window.location.href = 'dependentdropdown.php';

} else {

window.location.href = 'dependentdropdown.php?pcat=' +
pcat.options[pcat.selectedIndex].value;

</script>

<link rel="stylesheet" href="dependentdropdown.css">

</head>

<body><center><h2>Dependend Dropdown | <a


href="https://technopoints.co.in/">Technopoints</a></h2>

<?php
$actual_link = "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";

?><div class="styled-select slate" style="background-color:rgba(100,200,255,0.5);">

<form class="form" id="form" name="form" method="post" action="<?php echo $actual_link; ?>">

<p class="bg">

<label for="pcat">Select Parent Category</label> <!-- PARENT CATEGORY SELECTION -->

<!--onChange will run autoSubmit()-->

<select id="pcat" name="pcat" onchange="autoSubmit();">

<option value="">-- Select Parent Category --</option>

<?php

//branch=0 means main table

$sql = "select studentid,studentname from category where branch=0";

$result = mysqli_query($con,$sql);

while ($row = mysqli_fetch_array($result,MYSQLI_ASSOC)) {

echo ("<option value=\"{$row['studentid']}\" " . ($pmenu == $row['studentid'] ? "


selected" : "") . ">{$row['studentname']}</option>");

?>

</select>

</p>

<?php

if ($pmenu != '' && is_numeric($pmenu)) {

$sql = "select * from category where branch=" . $pmenu;

$result = mysqli_query($con,$sql);
$num = mysqli_num_rows($result);

if ($num > 0) {

?>

<p class="bg">

<label for="ccat">Select Sub-Category</label>&nbsp;&nbsp;&nbsp;

<select id="ccat" name="ccat">

<option value="">-- Select Sub-Category --</option>

<?php

//SUBCATEGORY stared

while ($row = mysqli_fetch_array($result,MYSQLI_ASSOC)) {

echo ("<option value=\"{$row['studentid']}\" " . ($cmenu == $row['studentid'] ? "


selected" : "") . ">{$row['studentname']}</option>");

?>

</select>

</p>

<?php

?>

<p><input name="submit" value="Submit" type="submit" /></p>

</form>

<h3><?php

if
(isset($_POST['submit'])) {

if (isset($_POST['ccat']) && is_numeric($_POST['ccat'])) {


$qry2 = "SELECT `gender` FROM `category` WHERE `studentid`=$cmenu";

$result2 = mysqli_query($con,$qry2);

$row2 = mysqli_fetch_array($result2,MYSQLI_ASSOC);

echo implode($row2);

?></h3>

</div>

<center></body>

</html>

4. CSS for the Relational Select Boxes

input[type=text] {

width: 95%;

padding: 7px 15px;

margin: 3px 0;

display: inline-block;

border: 1px solid #ccc;

border-radius: 4px;

box-sizing: border-box;

input[type=submit]{

padding: 10px 20px;


background-color: white;

color: black;

border: 2px solid #555555;

.styled-select.slate select {

border: 1px solid #ccc;

font-size: 16px;

height: 34px;

width: 268px;

body {

background-color:rgba(100,200,255,0.5);

input[type=submit]:hover {

align:center;

background-color: #555555;

color: white;

Output

You might also like