laravel multi select dropdown with checkbox example. In this tutorial, you will learn how to implement multi select dropdown with checkbox in laravel 8 app.
Sometimes you need multiple checkboxes with the dropdown list. So, You just need to follow some given steps to done of this multiselect dropdown with checkbox in laravel. And you can easily implement multiselect dropdown with checkbox in laravel 8 app.
Laravel Bootstrap 4 Multiselect Dropdown with Checkbox
Follow the below given steps and implement bootstrap 4 multiselect dropdown with checkbox in laravel 8 app:
- Step 1 – Install Laravel 8 App
- Step 2 – Connecting App to Database
- Step 3 – Create Model and Migration
- Step 4 – Add Routes
- Step 5 – Create Controllers By Artisan
- Step 6 – Create Blade Views
- Step 7 – Run Development Server
- Step 8 – Test This App
Step 1 – Install Laravel 8 App
First of all, Execute the following command on terminal to download or install laravel 8 fresh new setup:
composer create-project --prefer-dist laravel/laravel blog
Step 2 – Connecting App to Database
After that, open “.env” file and update the database name, username, and password in the env file:
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=Enter_Your_Database_Name DB_USERNAME=Enter_Your_Database_Username DB_PASSWORD=Enter_Your_Database_Password
Step 3 – Create Modal and Migration
In this step, create category table migration and create category Modal by using the following command:
php artisan make:model Category -m
Navigate database/migrations/ and open create_categorys_table.php file. Then update the following code into this file:
public function up()
{
Schema::create('categories', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->timestamps();
});
}
Now run the following command
php artisan migrate
Next, open Category.php model file and update the following code into it, which is placed on app/Models/:
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Category extends Model
{
protected $fillable = [
'name'
];
}
Step 4 – Add Routes
Next step, Navigate to “routes/web.php” file and add the following routes into your web.php file:
use App\Http\Controllers\CategoryController;
Route::get('cat', [CategoryController::class, 'index']);
Route::post('store', [CategoryController::class, 'store']);
Step 5 – Create Controllers by Artisan
Next step, execute the following command on terminal to create controller file that named CategoryController:
php artisan make:controller CategoryController
This command will create CategoryController by the artisan command.
Next, Navigate to app/http/controller and open CategoryController.php.Then update the following methods into your controller file:
<?php
namespace App\Http\Controllers;
use App\Models\Category;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
class CategoryController extends Controller
{
public function index()
{
return view('index');
}
public function store(Request $request)
{
$input = $request->all();
$data = [];
$data['name'] = json_encode($input['name']);
Category::create($data);
return response()->json(['success'=>'Recoreds inserted']);
}
}
Step 6 – Create Blade Views
In this step, create one blade views file for rendering data on it. So navigate to resources/views folder and create the blade view as following:
Create first file name index.blade.php and update the following code into it:
<!DOCTYPE html> <html> <head> <title>Multiselect Dropdown With Checkbox In Laravel - Tutsmake.com </title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" /> <meta name="csrf-token" content="{{ csrf_token() }}"> </head> <body class="bg-info"> <br /><br /> <div class="container" style="width:600px;"> <h2 align="center">Multiselect Dropdown With Checkbox In Laravel- Tutsmake.com</h2> <br /><br /> <form method="post" id="category_form"> <div class="form-group"> <label>Select</label> <select id="category" name="name[]" multiple class="form-control" > <option value="Codeigniter">Codeigniter</option> <option value="CakePHP">CakePHP</option> <option value="Laravel">Laravel</option> <option value="YII">YII</option> <option value="Zend">Zend</option> <option value="Symfony">Symfony</option> <option value="Phalcon">Phalcon</option> <option value="Slim">Slim</option> </select> </div> <div class="form-group"> <input type="submit" class="btn btn-info" name="submit" value="Submit" /> </div> </form> <br /> </div> </body> <script> $(document).ready(function(){ $('#category').multiselect({ nonSelectedText: 'Select category', enableFiltering: true, enableCaseInsensitiveFiltering: true, buttonWidth:'400px' }); $('#category_form').on('submit', function(event){ event.preventDefault(); var form_data = $(this).serialize(); $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } }); $.ajax({ url:"{{ url('store') }}", method:"POST", data:form_data, success:function(data) { $('#category option:selected').each(function(){ $(this).prop('selected', false); }); $('#category').multiselect('refresh'); alert(data['success']); } }); }); }); </script> </html>
Step 7 – Run Development Server
In this step, use the following php artisan serve command to start your server locally:
php artisan serve
Step 8 – Test This App
Now, open browser and hit the following url on it for test this app:
http://localhost:8000/cat
Conclusion
laravel multi select dropdown with checkbox example. In this tutorial, you have learned how to implement multi select dropdown with checkbox in laravel 8 app.
