6 Steps to Create Ajax Country State City Select Dropdown List

6 Steps to Create Ajax Country State City Select Dropdown List

Ajax Country State City Select Dropdown List with PHP & JavaScript. In this tutorial, you are going to learn about creating Ajax Country State City Select Dropdown List from scratch.

If you don’t know the basics of Ajax, go through my article on Ajax Basics where you will learn everything about Ajax with Video Tutorials. Then you can come back to this project so that you will have a clear understanding.

Demo video of Ajax Country State City Select Dropdown List

I’ve divided this project into 6 simple steps

1. Initial Project Setup

In this first step, I’m going to create all the necessary HTML Files and the HTML code. Then creating the Database & importing Database tables SQL code.

Then after that connecting to the database from PHP files, so that we can easily fetch records from the database in next steps.

Creating Necessary Files & Code

In this step, we will create all the necessary files. and we will add the code to these files.

We need index.php file for the select drop-down list of country, state, city. We will get this list from database combined with Ajax Request.

Next, we need states.php/cities.php files to get the list of states/cities for the select dropdown. Through Ajax request, we will get the data asynchronously.

Add this code in the index.php file. If you load this file in the browser, you should see country select list. You won’t see the state & city select list because in CSS I’m making this as display none. We will use these select lists later.

Creating Database & Importing SQL Code

Create a database with the name of phpajax, and import SQL from this GitHub resource for Countries, States & Cities

https://github.com/hiiamrohit/Countries-States-Cities-database

After importing these SQL files into the database, you will have these 3 database tables
Countries, States, Cities
We will use them in next steps.

Creating PHP Files & Connecting to Database

We should connect to the database in index.php file and other PHP pages. You can create a connect.php and include in all these pages.

But for now, I’ll add this database connection code manually.

Update your database host, username & password also database name.

Add this code to all the three files. That is to index.php, states.php, cities.php file.

2. Creating Ajax Request to send Country Id

In this step, we will create Ajax request to send country id from index.php to states.php. For that, we should do 2 things, create Ajax Request JavaScript function and add Event Listener.

Creating JavaScript Function

Here I’m creating a JavaScript function to send the country id from the value attribute of the country select list.

I’m naming the JavaScript function with the name of getStatesSelectList, inside this function I’m finding the country select list element with getElementById. Then I’m assigning the value of the select list to the country_id.

Then logging this value into the console using console.log

Add this above JavaScript functions inside script tag before body tag.

Adding Event Listener

Next, we should execute the JavaScript function with the event. I’m adding an event listener for on change event of the country select list.

After adding above code, you should see the values of select list console log after changing the option.

Now you are able to select “please select” option also. To stop it from happening add this below code.

3. Fetching Countries to display in Country Select List

In this step, I’m going fetch the countries list from the database with PHP. This code will be on index.php file

It’s simple to select SQL query to get the list of countries.

4 Fetching States from Database with states.php file

In this step, I’m going to fetch the list of states from database in state.php.

Right below the database connection code, add this code.

After adding the above code you can load states.php with country id in the URL like this states.php?country_id=101

You should see the list of states in this file If you see any PHP errors fix those errors.

5 Displaying the States List Output

And the final step to complete the States Select List is completing Ajax Request.

Add this code in the JavaScript Ajax function getStatesSelectList right below the console.log function.

In the above code, I’m creating a XMLHttpRequest new object. Then creating URL variable to pass the country id in URL.

Then using open function to configuring the XMLHttpRequest object.

After that checking onreadystatechange, if the readyState is 4 then assigning the response to a variable. I’m adding this response to the select list. After that updating, the display CSS property to inline.

6 Working on Cities Select List

While working with Cities, we can mostly reuse the code from States select functionality. And we should change the code little bit to fetch the cities from the database and adding the response in cities select list.

Adding Event Listener

First of all, we will add an event listener to track the changes in state select list. After selecting the state, we will pass this state id to cities.php file to get the list of cities and sending this response back to index.php and displaying it in cities select list.

Fetching Cities from Database with cities.php file

Add this code in the cities.php to get the list of all cities associated with the state id.

Displaying the Cities List Output

Next, I’ll log the state id into the console using console log function. Just to see whether we are getting the correct state id or not.

Then passing this state id to cities.php file with Ajax Request and updating the select list with the response received from the cities.php file.

After adding the above JavaScript function, you should see that cities select list is working.

Complete code of Ajax Country State City Select Dropdown List

If you are having a problem combining above pieces of code, use this complete code.

If you have any issues while working the code, let me know through the comments or post it in Coding Cyber FaceBook Group.


https://codingcyber org/ajax-country-state-city-select-dropdown-list-7698/
Vivek Vengala
 

Vivek Vengala is a Online Entrepreneur, Web Developer from Hyderabad India.

Click Here to Leave a Comment Below 0 comments

Leave a Reply: