Change country flags and ISD code using PHP MySQL Ajax and jQuery

4

In my last tutorial I have shared the list of all countries names with ISO and ISD codes in SQL and CSV format. So I thought, it would be great if I create a tutorial to include country flags as well as change country ISD code based on country selection. In this tutorial you will learn how to change country flags and ISD code using PHP MySQL Ajax and jQuery.

View Demo

Steps to change country flags and ISD codes

Keeping things simple, I would like to tell you what we are going to to. There will a list of countries name with ISD and ISO codes in our database. On the frontend i.e. browser we will fetch the countries list from the database and display it on a select dropdown box. whenever a user selects any country from the dropdown its respective country flag with ISD code will be displayed dynamically. We will be using the AJAX technique i.e only a part of the page will be changed.

Make sure you have created a database and after that create a table “countries“. You can download the total script (at the end of the article) which has the sql file or you can also copy the database which has been already posted in my last article List of all countries name with ISD and ISO code in SQL and CSV format.

Moving forward, If you guys are aware of my tutorial you will know that I use PHP PDO classes for database interaction. So lets just move ahead and create a basic config file where we can set all database constants and create database connection.

config.php

Once the database connection is done. Create a file called index.php which is your landing page of the project. Make a query to the database to fetch the list of the countries and then display it on the dropdown box.

index.php

Display the countries results in a dropdown box. Also bind it with onchange event so whenever the user selects any country it will change the country flag and ISD code by firing an Ajax request using Jquery.

Set your flag container and ISD code textfield area with unique ID attribute where the result is to be displayed. I am also showing the name of the selected country as well. It is optional you can leave it if you don’t want to.

Create a custom JavaScript function displayRecords() that will fire an Ajax request to another PHP file which will return the results as a JSON string. On success this function will then parse the Json string and display the values on their respective placeholders that are marked by ID. If you are new to jquery ajax and json read these tutorials  How to parse json with jquery and ajax and Read and write json file with php and mysql.

Once you are done with the index page, all you need to do is to create the a php page called getvalue.php that will return the results in json format based on the user selected country.

getvalue.php

I think this is the most easiest Jquery Ajax Json parsing tutorial you will come across. Using this technique you can create some advance script like creating multiple dropdown  based on user selection. You can have a look at this tutorial Multiple dropdown with jquery ajax and php.

View Demo
Download

Share.
 

About Author

Entrepreneur & Dreamer

I am a passionate Software Professional, love to learn and share my knowledge with others.

Software is the hardware of my life.

4 Comments

Leave A Reply

CommentLuv badge

Get more stuff like this
in your inbox

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.