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

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

In this post we will give you information about Laravel – Dynamic Dependant Select Box using JQuery Ajax Example – Part 2. Hear we will give you detail about Laravel – Dynamic Dependant Select Box using JQuery Ajax Example – Part 2And how to use it also give you demo for it if it is necessary.

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 AppHttpControllers;


use IlluminateHttpRequest;

use DB;


class AjaxDemoController extends Controller

{

/**

* Show the application myform.

*

* @return IlluminateHttpResponse

*/

public function myform()

{

$countries = DB::table('countries')->pluck("name","id")->all();

return view('myform',compact('countries'));

}


/**

* Show the application selectAjax.

*

* @return IlluminateHttpResponse

*/

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 >

<h1>Laravel 5 - Dynamic Dependant Select Box using JQuery Ajax Example</h1>


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


<div >

<label>Select Country:</label>

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

</div>


<div >

<label>Select State:</label>

{!! Form::select('id_state',[''=>'--- Select State ---'],null,['class'=>'form-control']) !!}

</div>


<div >

<button 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:

Also see:Laravel – Dynamic Dependant Select Box using JQuery Ajax Example – Part 1

http://localhost:8000/myform

I hope it can help you…

Hope this code and post will helped you for implement Laravel – Dynamic Dependant Select Box using JQuery Ajax Example – Part 2. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

Your email address will not be published. Required fields are marked *

14  +    =  18

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US