Tuesday, March 28, 2023
  • Privacy-Policy
  • Contact
  • About Us
  • IELTS Exam Pattern
Techsoft Tutorials
  • Home
  • Blockchain
    • Hyperledger Fabric
  • DevOps
  • Frameworks
    • ReactJS
    • CAKEPHP
  • Programming Languages
    • PHP
    • JAVA
  • Mobile App Development
    • Flutter
    • IONIC FRAMEWORK
    • React Native
  • WEB DESIGNING
    • FREE RESPONSIVE TEMPLATES
    • HTML 5 & CSS3
    • JQUERY
  • More
    • MISCELLANEOUS
    • Databases
No Result
View All Result
  • Home
  • Blockchain
    • Hyperledger Fabric
  • DevOps
  • Frameworks
    • ReactJS
    • CAKEPHP
  • Programming Languages
    • PHP
    • JAVA
  • Mobile App Development
    • Flutter
    • IONIC FRAMEWORK
    • React Native
  • WEB DESIGNING
    • FREE RESPONSIVE TEMPLATES
    • HTML 5 & CSS3
    • JQUERY
  • More
    • MISCELLANEOUS
    • Databases
No Result
View All Result
Techsoft Tutorials
No Result
View All Result
Home PHP

Ajax country state city dropdown using php & mysql

Bhavin Shiroya by Bhavin Shiroya
July 7, 2019
in PHP
7
Dropdown-php-and-sql-copy
8.9k
VIEWS
Share on FacebookShare on Twitter

Hello friend this post is all about Daynamic Selection of Dropdown in php and Mysql using ajax and jquery. Country city and state dropdown mostly used in new registration of new user and etc.

  • This tutorial will explain you how to make Dependent dropdown of country, state, and city, using ajax. You will find them implemented in various sites registration  form.when the user select country then second dropdown will populate with appropriate  states list then city like wise..
  • This Tutorials load the record dynamically from the database according the user input. with ajax call without refreshing the whole page data will be populate.
  •  country state city Dropdown, using ajax and jqurey fill country state city dropdown.
  • ajax country state city dropdown php, onchange in jquery, dynamic dropdown.

Database & Tables

[divider style=”solid” top=”-15″ bottom=”5″]

  • First of all open mysql and create one database dbcountries this database contains three tables country state and city as below. state table has relation with country table and city table has relation with state table.

Country State City tabel

Country

CREATE TABLE `country` (

`country_id` INT( 3 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`country_name` VARCHAR( 25 ) NOT NULL

) ENGINE = MYISAM ;


State

CREATE TABLE `state` (

`state_id` INT( 3 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`country_id` INT( 3 ) NOT NULL ,
`state_name` VARCHAR( 35 ) NOT NULL

) ENGINE = MYISAM ;


City

CREATE TABLE `city` (

`city_id` INT( 3 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`state_id` INT( 3 ) NOT NULL ,
`city_name` VARCHAR( 35 ) NOT NULL

) ENGINE = MYISAM ;

Above are the three table the we use in this tutorials each table have three columns which are dependent to each other.

 Dbconfig.Php

[divider style=”solid” top=”-15″ bottom=”5″]

  • Simple Database Configuration file.
<?php

$DB_host = "localhost";
$DB_user = "root";
$DB_pass = "";
$DB_name = "dbcountries";

try
{
	$DB_con = new PDO("mysql:host={$DB_host};dbname={$DB_name}",$DB_user,$DB_pass);
	$DB_con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
}
catch(PDOException $e)
{
	$e->getMessage();
}

 Index.Php

[divider style=”solid” top=”-15″ bottom=”5″]

  1. main index file where three dropdown box are available.
<?php
include_once 'dbconfig.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Dependent Select Box using jQuery and PHP</title>
<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
	$("#loding1").hide();
	$("#loding2").hide();
	$(".country").change(function()
	{
		$("#loding1").show();
		var id=$(this).val();
		var dataString = 'id='+ id;
		$(".state").find('option').remove();
		$(".city").find('option').remove();
		$.ajax
		({
			type: "POST",
			url: "get_state.php",
			data: dataString,
			cache: false,
			success: function(html)
			{
				$("#loding1").hide();
				$(".state").html(html);
			} 
		});
	});
	
	
	$(".state").change(function()
	{
		$("#loding2").show();
		var id=$(this).val();
		var dataString = 'id='+ id;
	
		$.ajax
		({
			type: "POST",
			url: "get_city.php",
			data: dataString,
			cache: false,
			success: function(html)
			{
				$("#loding2").hide();
				$(".city").html(html);
			} 
		});
	});
	
});
</script>
<style>
label
{
font-weight:bold;
padding:10px;
}
div
{
	margin-top:100px;
}
select
{
	width:200px;
	height:35px;
	border:2px solid #456879;
	border-radius:10px;
}

.color {
	color:green;
}

.link {
	color:red;
}
</style>
</head>

<body>
<h1 align="center" class="color"> Daynamic Dropdown in PHP &MySql Ajax And jQuery</h1>
<center>
<div>
<label>Country :</label> 
<select name="country" class="country">
<option selected="selected">--Select Country--</option>
<?php
	$stmt = $DB_con->prepare("SELECT * FROM country");
	$stmt->execute();
	while($row=$stmt->fetch(PDO::FETCH_ASSOC))
	{
		?>
        <option value="<?php echo $row['country_id']; ?>"><?php echo $row['country_name']; ?></option>
        <?php
	} 
?>
</select>
<br><br><br>
<label>State :</label> <select name="state" class="state">
<option selected="selected">--Select State--</option>
</select>
<img src="ajax-loader.gif" id="loding1"></img>
<br><br><br>
<label>City :</label> <select name="city" class="city">
<option selected="selected">--Select City--</option>
</select>
<img src="ajax-loader.gif" id="loding2"></img>
<br><br><br>
</div>
<br />
</center>
<h3 align="center"><a href="" class="link">Click Here For Tutorials</a></h3>
<h3 align="center"><a href="http://www.techsofttutorials.com/" class="link">WWW.TechsoftTutorials.com</a></h3>
</body>
</html>

 get_state.php

[divider style=”solid” top=”-15″ bottom=”5″]

  • This file is for get the all the state record from the state tabel and load dynamically.
<?php
include('dbconfig.php');
if($_POST['id'])
{
	$id=$_POST['id'];
		
	$stmt = $DB_con->prepare("SELECT * FROM state WHERE country_id=:id");
	$stmt->execute(array(':id' => $id));
	?><option selected="selected">Select State :</option><?php
	while($row=$stmt->fetch(PDO::FETCH_ASSOC))
	{
		?>
        	<option value="<?php echo $row['state_id']; ?>"><?php echo $row['state_name']; ?></option>
        <?php
	}
}
?>
<!-- www.techsofttutorials.com   Techsoft Tutorials, Free Latest Technology Tutorials and Demo. -->

 get_city.php

[divider style=”solid” top=”-15″ bottom=”5″]

  • In this file have php code for load correlated city according to state selection.
  • <?php
    include('dbconfig.php');
    if($_POST['id'])
    {
    	$id=$_POST['id'];
    	
    	$stmt = $DB_con->prepare("SELECT * FROM city WHERE state_id=:id");
    	$stmt->execute(array(':id' => $id));
    	?><option selected="selected">Select City :</option>
    	<?php while($row=$stmt->fetch(PDO::FETCH_ASSOC))
    	{
    		?>
    		<option value="<?php echo $row['city_id']; ?>"><?php echo $row['city_name']; ?></option>
    		<?php
    	}
    }
    ?>
    
    <!-- www.techsofttutorials.com   Techsoft Tutorials, Free Latest Technology Tutorials and Demo. -->
    
    
  •  all the main file are displayed remaining css and java script file include normally we do. It’s not big thing.
  • Depending on the dropdown ajax call the function and query should run and get the data from database and populate in dropdown list.
  • Loding image is indicate loding time of ajax function. When Query  response comes then login image invisible.

 Live Demo-:

ajax country state city dropdown using php mysql

 

[button color=”orange” size=”big” link=”http://demo.techsofttutorials.com/ajax_country_state_city_dropdown_using_php_mysql” target=”_blank” ]Live Demo[/button]
[button color=”blue” size=”big” link=”http://sh.st/b3Hh8″ target=”blank” ]Download[/button]

Tags: ajax callajax country state city dropdown phpajax spinnercountry city state dropdowndaynamic dropdown in phpdependent dropdown in php
Bhavin Shiroya

Bhavin Shiroya

Web Developer by Professional, Blogger by hobby, Youtuber by passion

Related Posts

Mobile-detect-in-php
PHP

How to detect mobile and tablet device using php code

August 14, 2019
Dynamic-Dropdown-with-Cakephp
CAKEPHP

Dynamic dropdown in cakephp 2.0 (Selectbox)

August 3, 2019
How-to-Send-Sms-using-PHP
PHP

Sending sms using php and mvaayoo API

July 7, 2019
php-login
PHP

php login form, with mysql using jquery 2015.

January 18, 2020

Categories

  • CAKEPHP
  • Databases
  • FREE RESPONSIVE TEMPLATES
  • HTML 5 & CSS3
  • IONIC FRAMEWORK
  • JAVA
  • JQUERY
  • MISCELLANEOUS
  • PHP
  • WEB DESIGNING
  • Privacy-Policy
  • Contact
  • About Us
  • IELTS Exam Pattern

© 2019 All Rights Reserved By Techsoft Tutorials

No Result
View All Result
  • Home
  • Blockchain
    • Hyperledger Fabric
  • DevOps
  • Frameworks
    • ReactJS
    • CAKEPHP
  • Programming Languages
    • PHP
    • JAVA
  • Mobile App Development
    • Flutter
    • IONIC FRAMEWORK
    • React Native
  • WEB DESIGNING
    • FREE RESPONSIVE TEMPLATES
    • HTML 5 & CSS3
    • JQUERY
  • More
    • MISCELLANEOUS
    • Databases

© 2019 All Rights Reserved By Techsoft Tutorials