Laravel 10/9 country state city dependent dropdown using jQuery ajax in php Laravel 10/9; Through this tutorial, i am going to show you how to create dynamic country state city dependent dropdown using ajax in php Laravel 10/9.
Laravel 10/9 AJAX Dependent Country State City Dropdown
Use the below given simple steps to create dependent country state city dropdown using jQuery ajax in Laravel 10/9 apps:
- Step 1 – Installing Laravel 10/9 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 10/9 Application
Execute the following command on terminal to install Laravel 10/9 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 10/9 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 10/9 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 10/9:
php artisan serve
Then open your browser and fire the following url into your browser:
http://localhost:8000/country-state-city
Conclusion
Laravel 10/9 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.
Be First to Comment