Codeigniter 4 Country State City Dropdown Using Ajax Example
Teams applying “Codeigniter 4 Country State City Dropdown Using Ajax Example” in a production project can use this project guide to record implementation, review and debugging time, then compare that effort with tests and shipped functionality instead of treating activity as performance by itself.
Before copying the example into a live application, confirm version-specific behaviour with CodeIgniter and test it against the project’s actual database and runtime.
Hi Dev,
In this example, I will show you country state city dropdown using ajax in codeigniter 4. This tutorial will give you simple example of country state city dependent dropdown using ajax in codeigniter 4. 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 article will give you simple example of 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
This is optional; however, if you have not created the codeigniter app, then you may go ahead and execute the below command:
composer create-project codeigniter4/appstarter ci-newsAfter Download successfully, extract clean new Codeigniter 4 application.
Step 2 : Basic Configurations
So, 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
Further, you need 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 - Nicesnippets.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 - Nicesnippets.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 serveNow, Go to your web browser, type the given URL and view the app output:
http://localhost:8080/- Codeigniter 4 jQuery Client Side Form Validation Tutorial Example
- Codeigniter - Load more data on page scroll using jQuery and Ajax
- Codeigniter Image Crop With JQuery Croppie Example Tutorial
- CodeIgniter 4 jQuery Form Validation Example
- Codeigniter 4 Ajax Load More Data On Page Scroll With JQuery Tutorial
- CodeIgniter 4 - React JS CRUD with MySQL Example
- Codeigniter Create Bar Chart In PHP With Chart Js
- PHP Codeigniter 4 Google Bar & Line Charts Tutorial