Laravel 8 Country State City DropDown Ajax

Dependent country state city dropdown using ajax in php laravel 8 framework.; In this tutorial, i will show you on how to create dynamic dependent country state city dropdown using ajax in php laravel.

Laravel 8 Dependent Country State City Dropdown with AJAX

  • Step 1 – Installing Laravel 8 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 8 Application

Execute the following command on terminal to install laravel 8 apps:

composer create-project --prefer-dist laravel/laravel demo

Step 2 – Configuring Database Details

Open your downloaded laravel 8 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 8 image upload tutorial app, which is located inside the following locations:

  • Demo/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 demo/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 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 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 8:

php artisan serve

Then open your browser and fire the following url into your browser:

http://localhost:8000/country-state-city

Conclusion

Laravel 8 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.

Recommended Laravel Tutorials

Leave a Comment