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