Laravel Bootstrap 4 Multiselect Dropdown with Checkbox

Laravel Bootstrap 4 Multiselect Dropdown with Checkbox

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.

Recommended Laravel Posts

Recommended:-Laravel Try Catch

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Vue JS, Angular JS, React Js, WordPress, and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

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