Codeigniter 4 - Country State City Dropdown Using Ajax Tutorial

Apr 20, 2022 . Admin



Hi Dev,

This tutorial will provide example of country state city dependent dropdown using ajax in codeigniter 4. This article goes in detailed on country state city dropdown using ajax in php. This article goes in detailed on country state city dropdown using ajax in codeigniter 4. This tutorial will give you simple example of country state city dropdown using jquery ajax in php.

I would like to share with you country state city dropdown using ajax in php. I explained simply about country state city dropdown using jquery ajax in php.

This tutorial will manual you little by little on a way to integrate country state city dropdown using ajax in codeigniter 4.

So let's start to the example.

Step 1: Install Codeigniter 4

First of all if you have not created the codeigniter app, then you may go ahead and execute the below command:

composer create-project codeigniter4/appstarter ci-news

After Download successfully, extract clean new Codeigniter 4 application.

Step 2 : Basic Configurations

In this second step we will now set basic configuration on the app/config/app.php file, so let’s implement to application/config/config.php and open this file on text editor.

app/config/app.php 
public $baseURL = 'http://localhost:8080';
To
public $baseURL = 'http://localhost/example/';
Step 3 : Database Configurations 
CREATE DATABASE demo;
 
CREATE TABLE `countries` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `name` varchar(50) COLLATE utf8_unicode_ci NOT NULL,
 `status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1=Active | 0=Inactive',
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
 
CREATE TABLE `states` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `country_id` int(11) NOT NULL,
 `name` varchar(50) COLLATE utf8_unicode_ci NOT NULL,
 `status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1=Active | 0=Inactive',
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
 
CREATE TABLE `cities` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `state_id` int(11) NOT NULL,
 `name` varchar(50) COLLATE utf8_unicode_ci NOT NULL,
 `status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1=Active | 0=Inactive',
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
 
INSERT INTO `countries` VALUES (1, 'USA', 1);
INSERT INTO `countries` VALUES (2, 'Canada', 1);
  
  
INSERT INTO `states` VALUES (1, 1, 'New York', 1);
INSERT INTO `states` VALUES (2, 1, 'Los Angeles', 1);
INSERT INTO `states` VALUES (3, 2, 'British Columbia', 1);
INSERT INTO `states` VALUES (4, 2, 'Torentu', 1);
  
  
INSERT INTO `cities` VALUES (1, 2, 'Los Angales', 1);
INSERT INTO `cities` VALUES (2, 1, 'New York', 1);
INSERT INTO `cities` VALUES (3, 4, 'Toranto', 1);
INSERT INTO `cities` VALUES (4, 3, 'Vancovour', 1);
Step 4 : Database Configurations application/config/database.php 
public $default = [
    'DSN'      => '',
    'hostname' => 'localhost',
    'username' => 'root',
    'password' => '',
    'database' => 'demo',
    'DBDriver' => 'MySQLi',
    'DBPrefix' => '',
    'pConnect' => false,
    'DBDebug'  => (ENVIRONMENT !== 'production'),
    'cacheOn'  => false,
    'cacheDir' => '',
    'charset'  => 'utf8',
    'DBCollat' => 'utf8_general_ci',
    'swapPre'  => '',
    'encrypt'  => false,
    'compress' => false,
    'strictOn' => false,
    'failover' => [],
    'port'     => 3306,
];
Step 5 : Create Model

in this step we will create a model file MainModel.php and then following below code.

<?php
namespace App\Controllers;
use CodeIgniter\Controller;
use CodeIgniter\HTTP\RequestInterface;
use CodeIgniter\HTTP\ResponseInterface;
use App\Models\MainModel;
  
class DropdownAjaxController extends Controller 
{

    /**
     * Write code on Method
     *
     * @return response()
     */
    public function index() {
          
        helper(['form', 'url']);
        $this->MainModel = new MainModel();
        $data['countries'] = $this->MainModel->getCountries();
        return view('dropdown-list', $data);
    }
    
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function getStates() {
  
        $this->MainModel = new MainModel();
  
        $postData = array(
            'country_id' => $this->request->getPost('country_id'),
        );
  
        $data = $this->MainModel->getStates($postData);
  
        echo json_encode($data);
    }
    
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function getCities() {
  
        $this->MainModel = new MainModel();
  
        $postData = array(
            'state_id' => $this->request->getPost('state_id'),
        );
  
        $data = $this->MainModel->getCities($postData);
  
        echo json_encode($data);
    }    
  
}
Step 6 : Set Up Controller

We will require to generate a new controller that manages the online stripe transaction, hence create a DropdownAjaxController file and append the example code in..

app/Controllers/DropdownAjaxController.php 
<?php
namespace App\Controllers;
use CodeIgniter\Controller;
use CodeIgniter\HTTP\RequestInterface;
use CodeIgniter\HTTP\ResponseInterface;
use App\Models\MainModel;
  
class DropdownAjaxController extends Controller 
{

    /**
     * Write code on Method
     *
     * @return response()
     */
    public function index() {
          
        helper(['form', 'url']);
        $this->MainModel = new MainModel();
        $data['countries'] = $this->MainModel->getCountries();
        return view('dropdown-view', $data);
    }
    
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function getStates() {
  
        $this->MainModel = new MainModel();
  
        $postData = array(
            'country_id' => $this->request->getPost('country_id'),
        );
  
        $data = $this->MainModel->getStates($postData);
  
        echo json_encode($data);
    }
    
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function getCities() {
  
        $this->MainModel = new MainModel();
  
        $postData = array(
            'state_id' => $this->request->getPost('state_id'),
        );
  
        $data = $this->MainModel->getCities($postData);
  
        echo json_encode($data);
    }    
}
Step 7 : Set Up View

Head over to application/views/ folder, create a new dropdown-view.php file. Likewise, open and add the suggested code example in application/views/dropdown-view.php file:

application/views/dropdown-view.php 
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="csrf-token" content="content">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Codeigniter 4 Dependent Country State City Dropdown using Ajax - Mywebtuts.com</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" >
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h2 class="text-success">Codeigniter 4 Dependent Country State City Dropdown using Ajax - Mywebtuts.com</h2>
                </div>
                <div class="card-body">
                    <form>
                        <div class="form-group">
                            <label for="country">Countries</label>
                            <select class="form-control" id="country_id">
                                <option value="">Select Country</option>
                                    <?php foreach($countries as $c){?>
                                <option value="<?php echo $c->id;?>"><?php echo $c->name;?></option>"
                                <?php }?>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="state">States</label>
                            <select class="form-control" id="state_id"></select>
                        </div>                        
                        <div class="form-group">
                            <label for="city">Cities</label>
                            <select class="form-control" id="city_id"></select>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script type='text/javascript'>

/*------------------------------------------
--------------------------------------------
baseURL variable
--------------------------------------------
--------------------------------------------*/
var baseURL= "<?php echo base_url();?>";
$(document).ready(function(){

    /*------------------------------------------
    --------------------------------------------
    City Change
    --------------------------------------------
    --------------------------------------------*/
    $('#country_id').change(function(){
        var country_id = $(this).val();
        $.ajax({
            url:'<?=base_url()?>/DropdownAjaxController/getStates',
            method: 'post',
            data: {country_id: country_id},
            dataType: 'json',
            success: function(response){
                $('#state_id').find('option').not(':first').remove();
                $('#city_id').find('option').not(':first').remove();
                $.each(response,function(index,data){
                    $('#state_id').append('<option value="'+data['id']+'">'+data['name']+'</option>');
                });
            }
        });
    });

    /*------------------------------------------
    --------------------------------------------
    Department Change 
    --------------------------------------------
    --------------------------------------------*/
    $('#state_id').change(function(){
        var state_id = $(this).val();
        $.ajax({
            url:'<?=base_url()?>/DropdownAjaxController/getCities',
            method: 'post',
            data: {state_id: state_id},
            dataType: 'json',
            success: function(response){
                $('#city_id').find('option').not(':first').remove();
                $.each(response,function(index,data){
                    $('#city_id').append('<option value="'+data['id']+'">'+data['name']+'</option>');
                });
            }
        });
    });
});
</script>
</body>
</html>
Step 8 : Run Codeigniter App:

All the required steps have been done, now you have to type the given below command and hit enter to run the Codeigniter app:

php spark serve

Now, Go to your web browser, type the given URL and view the app output:

http://localhost:8080/

I hope it can help you...

#Codeigniter 4

You might also like...