PHP AJAX Dependent Menu (Country and State Dropdown menu)

Hi Guys Today We will learn how to Create Dynamic Ajax Dependent Menu help of MySQL Database.
Also Learn
1. PHP MySQL Pagination
2. PHP MySQL Login with SESSION
3. php mysql comment system
4. sort MySQL table column using PHP

5. PHP MySQL Shopping Cart

What you need..

First create a database named: test
create two tables named: country and state

Now use The below SQL Commands to Create a table(country) and Insert some country name:
SQL for Creating Table country

CREATE TABLE IF NOT EXISTS `country` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `country` varchar(50) NOT NULL,
   PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=latin1;

SQL fro Inserting/Dumping Country Name

INSERT INTO `country` (`id`, `country`) VALUES
(1, 'India'),
(2, 'United States'),
(3, 'Canada'),
(4, 'Austrailia');

Now use The below SQL Commands to Create a table(state) and Insert some state name:
SQL for Creating Table state

CREATE TABLE IF NOT EXISTS `state` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `countryid` varchar(50) NOT NULL,
  `state` varchar(50) NOT NULL,
   PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=15 DEFAULT CHARSET=latin1;

SQL for Inserting/Dumping state Name

INSERT INTO `state` (`id`, `countryid`, `state`) VALUES
(1, '1', 'West Bengal'),
(2, '1', 'Maharastra'),
(3, '1', 'Delhi'),
(4, '1', 'Tamil Nadu'),
(5, '2', 'California'),
(6, '2', 'Alaska'),
(7, '2', 'Washington'),
(8, '2', 'New Jersey'),
(9, '2', 'New York'),
(10, '2', 'Texas'),
(11, '3', 'Ontario'),
(12, '3', 'British Columbia'),
(13, '4', 'New South Wales'),
(14, '4', 'Victoria');

1.create connect.php file.
2.create index.html file.
3.create script.js file.
4.create getstate.php file.
5.create style.css file.
6.download jquery_latest.js from jquery official website..

1.Creating connect.php to connect database.

<?php
$conn=new mysqli('localhost','root','','test');
?>

2.Creating index.php file..

<html>
<head>
<title>AJAX PHP Dependent Menu (Country and State)</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<div id="content">
<h2>AJAX PHP Dependent Menu (Country and State)</h2>
<select onchange="getstate(value)">
   <option>Select Country</option>
  <?php
  include("connect.php");
  $result=mysqli_query($conn,"SELECT*FROM country");
  while($row=$result->fetch_array()){?>
   <option value="<?php echo $row['id'];?>"><?php echo $row['country'];?></option>
  
<?php } ?>
</select>
<div id="success"></div>
  
<div>
</html>

3.Creating script.js file..

function getstate(value){
$.ajax({
 url:"getstate.php",
 type:"POST",
 data:{id:value},
 success: function(data){
  $("#success").html(data);
 }
});
return false;
}

4.Creating getstate.php file..

<select>
  <option>Select State</option>
<?php
   if(isset($_POST['id'])){
   include("connect.php");
   $id=$_POST['id'];
   $result=mysqli_query($conn,"SELECT*FROM state WHERE countryid='$id'");
   while($row=$result->fetch_array()){?>
    <option><?php echo $row['state'];?></option>
   
   <?php }} ?>
  </select>

5. style.css codes....

#content{
 width:560px;
 height:200px;
 background:#66ccff;
 margin:auto;
 text-align:center;
}
select{
 padding:5px;
 font-size:20px;
 font-weight:bold;
 color:green;
 width:200px;
 cursor:pointer;
}
   
#success{
 padding:5px;
   
}

That's all, this is how to create dynamic Dependent menu using Ajax, PHP and MySQL. You can customize this codes further as per your requirement. feel free to give your comment on this tutorial.

Tag:

#PHP AJAX Dependent Menu (Country and State Dropdown menu),PHP AJAX Dropdown Menu,#AJAX Dependent Menu,#AJAX Dependent Dropdown,#AJAX Dependent Dropdown with PHP,#country state city drop down list using ajax in php,dependent dropdown in php using mysql data,#multiple drop down list in php using ajax,#two dependent dropdown in php,

#dependent drop down list

Latest

What is Dark web vs Deep Web and how to access Dark web/Deep Web

How to Create popup Widget for Blogger

Sendinblue Review a Cheap email marketing Service

Bluehost Review 2018

PHP ajax Inline Insert

JavaScript Hide Show Password

JavaScript countdown timer code

javascript digital clock with date

JavaScript Digital Clock Example

javascript password protect page with JavaScript Prompt

export mysql database table to csv using php

php xml to array

Import CSV file into MySQL using PHP

php read csv file

php export to excel

php read xml file

php upload multiple files

PHP File upload

ajax pagination with php

php http authentication example

php create zip file

JavaScript Capture keyboard events -Get Pressed key and Keycode

Detect the screen resolution with JavaScript

get ip address in php

add syntax highlighter to blogger

Monday, December 18, 2017

PHP AJAX Dependent Menu (Country and State Dropdown menu)