Laravel 11 country state city dependent dropdown using jQuery ajax in php Laravel 11; Through this tutorial, i am going to show you how to create dynamic country state city dependent dropdown using ajax in php Laravel 11.
Laravel 11 AJAX Dependent Country State City Dropdown
Use the below given simple steps to create dependent country state city dropdown using jQuery ajax in Laravel 11 apps:
- Step 1 – Installing Laravel 11 Application
- Step 2 – Configuring Database Details
- Step 3 – Creating Model & Migration
- Step 4 – Create Routes
- Step 5 – Create Country State City Controller
- Step 6 – Create Country State City Dropdown View
- Step 7 – Implement Ajax Code For Country State City Dropdown
- Step 8 – Start Development Server
Step 1 – Installing Laravel 11 Application
Execute the following command on terminal to install Laravel 11 apps:
composer create-project --prefer-dist laravel/laravel demo
Step 2 – Configuring Database Details
Open your downloaded laravel app into any text editor. Then find .env file and configure database detail like following:
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=db name DB_USERNAME=db user name DB_PASSWORD=db password
Step 3 – Creating Model & Migration
Execute the following command on terminal to navigate to your project by using the following command:
cd / demo
Then create model and migration file by using the following command:
php artisan make:model Country php artisan make:model State php artisan make:model City php artisan make:migration create_country_state_city_tables
The above command will create two files into your laravel country state city app, which is located inside the following locations:
- /database/migrations/create_pictures_table.php
So, find create_country_state_city_tables .php file inside Demo/database/migrations/ directory. Then open this file and add the following code into function up() on this file:
<?php
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateCountryStateCityTables extends Migration
{
public function up()
{
Schema::create('countries', function (Blueprint $table) {
$table->increments('id');
$table->string('name');
$table->timestamps();
});
Schema::create('states', function (Blueprint $table) {
$table->increments('id');
$table->string('name');
$table->integer('country_id');
$table->timestamps();
});
Schema::create('cities', function (Blueprint $table) {
$table->increments('id');
$table->string('name');
$table->integer('state_id');
$table->timestamps();
});
}
public function down()
{
Schema::drop('countries');
Schema::drop('states');
Schema::drop('cities');
}
}
Now, open again your terminal and type the following command on cmd to create tables into your selected database:
php artisan migrate
Step 4 – Create Routes
Open your web.php file, which is located inside routes directory. Then add the following routes into web.php file:
use App\Http\Controllers\CountryStateCityController;
Route::get('country-state-city', [CountryStateCityController::class, 'index']);
Route::post('get-states-by-country', [CountryStateCityController::class, 'getState']);
Route::post('get-cities-by-state', [CountryStateCityController::class, 'getCity']);
Step 5 – Create Country State City Controller
Create Country State City controller by using the following command:
php artisan make:controller CountryStateCityController
The above command will create CountryStateCityController.php file, which is located inside /app/Http/Controllers/ directory.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Validator,Redirect,Response;
use App\Models\{Country,State,City};
class CountryStateCityController extends Controller
{
public function index()
{
$data['countries'] = Country::get(["name","id"]);
return view('country-state-city',$data);
}
public function getState(Request $request)
{
$data['states'] = State::where("country_id",$request->country_id)
->get(["name","id"]);
return response()->json($data);
}
public function getCity(Request $request)
{
$data['cities'] = City::where("state_id",$request->state_id)
->get(["name","id"]);
return response()->json($data);
}
}
Step 6 – Creating Crop Image Upload Blade View
Ceate new blade view file that named country-state-city.php inside resources/views directory and add the following code into it:
<!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>Laravel 11 Ajax Country State City Dropdown List - Laratutorials.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">Laravel 11 Country State City Dependent Dropdown List with Ajax - Laratutorials.COM</h2>
</div>
<div class="card-body">
<form>
<div class="form-group">
<label for="country">Country</label>
<select class="form-control" id="country-dropdown">
<option value="">Select Country</option>
@foreach ($countries as $country)
<option value="{{$country->id}}">
{{$country->name}}
</option>
@endforeach
</select>
</div>
<div class="form-group">
<label for="state">State</label>
<select class="form-control" id="state-dropdown">
</select>
</div>
<div class="form-group">
<label for="city">City</label>
<select class="form-control" id="city-dropdown">
</select>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Step 7 – Implement Ajax Code For Country State City Dropdown
Implement ajax code for get country state city list in dropdown view. Then add the following code into your view file:
<script>
$(document).ready(function() {
$('#country-dropdown').on('change', function() {
var country_id = this.value;
$("#state-dropdown").html('');
$.ajax({
url:"{{url('get-states-by-country')}}",
type: "POST",
data: {
country_id: country_id,
_token: '{{csrf_token()}}'
},
dataType : 'json',
success: function(result){
$.each(result.states,function(key,value){
$("#state-dropdown").append('<option value="'+value.id+'">'+value.name+'</option>');
});
$('#city-dropdown').html('<option value="">Select State First</option>');
}
});
});
$('#state-dropdown').on('change', function() {
var state_id = this.value;
$("#city-dropdown").html('');
$.ajax({
url:"{{url('get-cities-by-state')}}",
type: "POST",
data: {
state_id: state_id,
_token: '{{csrf_token()}}'
},
dataType : 'json',
success: function(result){
$.each(result.cities,function(key,value){
$("#city-dropdown").append('<option value="'+value.id+'">'+value.name+'</option>');
});
}
});
});
});
</script>
Step 8 – Start Development Server
Execute the following command to start development server for your crop image before upload in Laravel 11:
php artisan serve
Then open your browser and fire the following url into your browser:
http://localhost:8000/country-state-city
Conclusion
Laravel 11 dynamic dependent country state city dropdown using ajax; In this tutorial,you have learned on how to create dependent country state city dropdown using ajax in php laravel framework.