Home / Ajax / PHP / sql / Ajax country state city dropdown using php & mysql

Ajax country state city dropdown using php & mysql

, ,

Ajax country state city dropdown using php & mysql



 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..

Database & Tables:

Country State City tabel

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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

  • Simple Database Configuration file.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?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

  1. main index file where three dropdown box are available.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<?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

  • This file is for get the all the state record from the state tabel and load dynamically.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?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

  • In this file have php code for load correlated city according to state selection.
  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <?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.
Ajax country state city dropdown using php & mysql Ajax country state city dropdown using php & mysql Reviewed by Anonymous on March 03, 2017 Rating: 5

No comments:

Subscribe to: Post Comments ( Atom )

Java Ternary Operator

Java Ternary Operator Java ternary operator is the only conditional operator that takes three operands. Java ternary operator is a one l...

Powered by Blogger.