Laravel - Dynamic Dependant Select Box using JQuery Ajax Example - Part 2

By Hardik Savani November 5, 2023 Category : PHP Laravel Bootstrap jQuery MySql Ajax


After complete our fist part of Laravel 5 - Dynamic Dependant Select Box using JQuery Ajax Example, Now we have to do main task for Dynamic select box value. In this part we follow two step for create Controller File and Laravel Blade File.

In this part we write code for how to manage controller method and how to give response them. So let's follow this bellow remaining two step of change drop down options on change of parent dropdown. So let's follow:

Step 5: Create Controller

In this point, now we should create new controller as AjaxDemoController in this path app/Http/Controllers/AjaxDemoController.php. this controller will manage layout and ajax post request, So run bellow command for generate new controller:

php artisan make:controller AjaxDemoController

Ok, now put bellow content in controller file:

app/Http/Controllers/AjaxDemoController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use DB;

class AjaxDemoController extends Controller
{
	/**
     * Show the application myform.
     *
     * @return \Illuminate\Http\Response
     */
    public function myform()
    {
    	$countries = DB::table('countries')->pluck("name","id")->all();
    	return view('myform',compact('countries'));
    }

    /**
     * Show the application selectAjax.
     *
     * @return \Illuminate\Http\Response
     */
    public function selectAjax(Request $request)
    {
    	if($request->ajax()){
    		$states = DB::table('states')->where('id_country',$request->id_country)->pluck("name","id")->all();
    		$data = view('ajax-select',compact('states'))->render();
    		return response()->json(['options'=>$data]);
    	}
    }
}

Step 6: Create View

In Last step, let's create two blade files as listed bellow:

1)myform.blade.php

2)ajax-select.blade.php

One for render layout of form and another blade file for render options layout, so proceed to create both file one by one.

resources/views/myform.blade.php

<!DOCTYPE html>
<html>
<head>
	<title>Laravel 5 - onChange event using ajax dropdown list</title>
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>

<div class="container">
  <h1>Laravel 5 - Dynamic Dependant Select Box using JQuery Ajax Example</h1>

  {!! Form::open() !!}

    <div class="form-group">
      <label>Select Country:</label>
      {!! Form::select('id_country',[''=>'--- Select Country ---']+$countries,null,['class'=>'form-control']) !!}
    </div>

    <div class="form-group">
      <label>Select State:</label>
      {!! Form::select('id_state',[''=>'--- Select State ---'],null,['class'=>'form-control']) !!}
    </div>

    <div class="form-group">
      <button class="btn btn-success" type="submit">Submit</button>
    </div>

  {!! Form::close() !!}

</div>

<script type="text/javascript">
  $("select[name='id_country']").change(function(){
      var id_country = $(this).val();
      var token = $("input[name='_token']").val();
      $.ajax({
          url: "<?php echo route('select-ajax') ?>",
          method: 'POST',
          data: {id_country:id_country, _token:token},
          success: function(data) {
            $("select[name='id_state'").html('');
            $("select[name='id_state'").html(data.options);
          }
      });
  });
</script>

</body>
</html>

resources/views/ajax-select.blade.php

<option>--- Select State ---</option>
@if(!empty($states))
  @foreach($states as $key => $value)
    <option value="{{ $key }}">{{ $value }}</option>
  @endforeach
@endif

Now we are ready to run our example so run bellow command ro quick run:

php artisan serve

Now you can open bellow URL on your browser:

Read Also: Laravel 10 File Upload Example Tutorial
http://localhost:8000/myform

I hope it can help you...


Tags :
Previous

Laravel Join Query with Comma Separated Column Example
Next

Laravel - Dynamic Dependant Select Box using JQuery Ajax Example - Part 1

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares