How to make simple dependent dropdown using jquery ajax in Laravel 5?
In this post we will give you information about How to make simple dependent dropdown using jquery ajax in Laravel 5?. Hear we will give you detail about How to make simple dependent dropdown using jquery ajax in Laravel 5?And how to use it also give you demo for it if it is necessary.
In this tutorial, I am going to do a simple dependent drop down list in Laravel 5 application using jquery ajax. In this simple example through we understand how to work dependent dropdown in laravel even if you beginner.
We sometimes require to make dependent dropdown like when state select at that time bellow city drop down list should change, i mean related to selected state. In this example i have two tables and there are listed bellow:
1.demo_state
2.demo_cities
So, when user will change state at that time, dynamically change city drop down box from database. you can implement this example in your application by follow bellow few step.
After complete bellow example, you will find layout as bellow:
Preview:
Step 1: Create Tables
In first step we have to create migration for demo_state and demo_cities tables using Laravel 5 php artisan command, so first fire bellow command:
php artisan make:migration create_state_city_tables
After this command you will find one file in following path database/migrations and you have to put bellow code in your migration file for create tables.
use IlluminateDatabaseSchemaBlueprint;
use IlluminateDatabaseMigrationsMigration;
class CreateStateCityTables extends Migration
{
public function up()
{
Schema::create('demo_state', function (Blueprint $table) {
$table->increments('id');
$table->string('name');
$table->timestamps();
});
Schema::create('demo_cities', function (Blueprint $table) {
$table->increments('id');
$table->integer('state_id');
$table->string('name');
$table->timestamps();
});
}
public function down()
{
Schema::drop('demo_cities');
Schema::drop('demo_state');
}
}
After this migration, you should run migration using artisan command like as bellow:
php artisan migrate
Now, in your database, you will have two tables “demo_state” and “demo_cities”. Now we require to add some dummy data in both table like as bellow image.
demo_state
demo_cities
Step 2: Add Route
In this is step we need to create route two, one for layout and second for ajax request. so open your app/Http/routes.php file and add following route.
Route::get('myform',array('as'=>'myform','uses'=>'HomeController@myform'));
Route::get('myform/ajax/{id}',array('as'=>'myform.ajax','uses'=>'HomeController@myformAjax'));
Step 3: Add Controller Method
Ok, now we should create new controller as HomeController if you haven’t before in this path app/Http/Controllers/HomeController.php. this controller will manage layout and dynamic ajax data, so put bellow content in controller file:
app/Http/Controllers/HomeController.php
namespace AppHttpControllers;
use AppHttpRequests;
use IlluminateHttpRequest;
use DB;
class HomeController extends Controller
{
/**
* Show the application layout
*
* @return IlluminateHttpResponse
*/
public function myform()
{
$states = DB::table("demo_state")->lists("name","id");
return view('myform',compact('states'));
}
/**
* Get Ajax Request and restun Data
*
* @return IlluminateHttpResponse
*/
public function myformAjax($id)
{
$cities = DB::table("demo_cities")
->where("state_id",$id)
->lists("name","id");
return json_encode($cities);
}
}
Step 4: Add Blade File
In Last step, we should create myform.blade.php file in your resources directory that way we can write jquery code and layout. So, create new blade file from following path and put bellow code:
resources/view/myform.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel Dependent Dropdown Example with demo</title>
<script src="http://demo.onlinecode/plugin/jquery.js"></script>
<link rel="stylesheet" href="http://demo.onlinecode/plugin/bootstrap-3.min.css">
</head>
<body>
<div >
<div >
<div >Select State and get bellow Related City</div>
<div >
<div >
<label for="title">Select State:</label>
<select name="state" style="width:350px">
<option value="">--- Select State ---</option>
@foreach ($states as $key => $value)
<option value="{{ $key }}">{{ $value }}</option>
@endforeach
</select>
</div>
<div >
<label for="title">Select City:</label>
<select name="city" style="width:350px">
</select>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('select[name="state"]').on('change', function() {
var stateID = $(this).val();
if(stateID) {
$.ajax({
url: '/myform/ajax/'+stateID,
type: "GET",
dataType: "json",
success:function(data) {
$('select[name="city"]').empty();
$.each(data, function(key, value) {
$('select[name="city"]').append('<option value="'+ key +'">'+ value +'</option>');
});
}
});
}else{
$('select[name="city"]').empty();
}
});
});
</script>
</body>
</html>
Ok, now you can run and check…..
Hope this code and post will helped you for implement How to make simple dependent dropdown using jquery ajax in Laravel 5?. 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