Get Country State and City using JavaScript ajax and php

Hello

Here Example Of set your country,state,city using javascript ajax and php

Country State City Dropdown Using Ajax. ... In the onChage event of the country drop down we have called showhint() function of the javascript and also get current state of city using show_city();

Full Code

--
-- Table structure for table `city`
--

CREATE TABLE `city` (
  `id` int(11) NOT NULL auto_increment,
  `cid` int(11) NOT NULL,
  `sid` int(11) NOT NULL,
  `city_name` varchar(255) NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;

--
-- Dumping data for table `city`
--

INSERT INTO `city` (`id`, `cid`, `sid`, `city_name`) VALUES
(1, 1, 1, 'ahmedabad'),
(2, 1, 1, 'rajkot'),
(3, 2, 3, 'afarica city 1'),
(4, 2, 4, 'afarica city 2');

-- --------------------------------------------------------

--
-- Table structure for table `country`
--

CREATE TABLE `country` (
  `id` int(11) NOT NULL auto_increment,
  `countryname` varchar(255) NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

--
-- Dumping data for table `country`
--

INSERT INTO `country` (`id`, `countryname`) VALUES
(1, 'india'),
(2, 'africa');

-- --------------------------------------------------------

--
-- Table structure for table `state`
--

CREATE TABLE `state` (
  `id` int(11) NOT NULL auto_increment,
  `cid` int(11) NOT NULL,
  `s_name` varchar(255) NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;

--
-- Dumping data for table `state`
--

INSERT INTO `state` (`id`, `cid`, `s_name`) VALUES
(1, 1, 'gujrat'),
(2, 1, 'bihar'),
(3, 2, 'afarica state1'),
(4, 2, 'afarica state 2');

all_date.php file

<script>
function showHint(str) {

    if (str.length == 0) {
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {


                document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET", "getstate.php?q=" + str, true);
        xmlhttp.send();
    }

}

function showCity(str) {


    if (str.length == 0) {
        document.getElementById("txtCity").innerHTML = "";
        return;
    } else {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {


                document.getElementById("txtCity").innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET", "getcity.php?q=" + str, true);
        xmlhttp.send();
    }

}

</script>

<?php

mysql_connect("localhost","root","");

mysql_select_db('test_country');

$get_country = mysql_query("select * from country");



?>
<label> country</label>

<select name="country" onchange="showHint(this.value)" >
<option value="0" >select country</option>
<?php
while($row_country = mysql_fetch_assoc($get_country)){ ?>


<option value="<?php echo $row_country['id']; ?>"/>
<?php echo $row_country['countryname'];  ?>
</option>


<?php
}
?>
</select>
<select name="state" id="txtHint" onchange="showCity(this.value)" >
</select>

<select name="city" id="txtCity">
</select>
</br>

getstate.php file

<option value="0" >select state</option>
<?php
mysql_connect("localhost","root","");

mysql_select_db('test_country');

$q=$_GET['q'];

echo $select_state= mysql_query("select * from state where cid=".$q);

while($result_state= mysql_fetch_array($select_state)){ ?>

<option value="<?php echo $result_state['id']; ?>"><?php echo $result_state['s_name']; ?></option>

<?php }
?>

getcity.php file

<option value="0" >select City</option>
<?php
mysql_connect("localhost","root","");

mysql_select_db('test_country');

$q=$_GET['q'];

echo $select_state= mysql_query("select * from city where sid=".$q);

while($result_state= mysql_fetch_array($select_state)){ ?>

<option value="<?php echo $result_state['id']; ?>"><?php echo $result_state['city_name']; ?></option>

<?php }
?>