Laravel 8 Multiselect Dropdown with Checkbox In Bootstrap 4
Hello Dev,
In the present day, i we’ll present you laravel Eight multiselect dropdown with checkbox in bootstrap 4. This text offers you easy instance of laravel Eight multiselect dropdown with checkbox in bootstrap 4. you’ll be taught laravel Eight multiselect dropdown with checkbox in bootstrap 4.
On this artical i’ll present you laravel Eight multiselect dropdown with checkbox in bootstrap 4. Once we make a weblog web site, we’d like the multiselect dropdown perform. We are able to use this instance in Laravel 6, Laravel 7, Laravel 8, all. So let’s observe few step to create instance of laravel Eight multiselect dropdown with checkbox in bootstrap 4.
Preview:
Step 1:- Set up Laravel
First of, open your terminal and set up new Laravel:
composer create-project --prefer-dist laravel/laravel multiselect
Step 2:- Join Database .env
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=databse DB_USERNAME=root DB_PASSWORD=
Step 3:- Create Modal and Migration
On this step, we have to create class desk and mannequin
php artisan make:mannequin Class -m
databasemigrationscreate_categories_table.php
public perform up()
{
Schema::create('classes', perform (Blueprint $desk) {
$table->id();
$table->string('title');
$table->timestamps();
});
}
appModelsCategory.php
<?php
namespace AppModels;
use IlluminateDatabaseEloquentFactoriesHasFactory;
use IlluminateDatabaseEloquentModel;
class Class extends Mannequin
{
protected $fillable = [
'name'
];
}
run following command
php artisan migrate
Step 4:- Add Routes
use AppHttpControllersCategoryController;
Route::get('cat', [CategoryController::class, 'index']);
Route::submit('retailer', [CategoryController::class, 'store']);
Step 5:- Create Controllers
run following command and create controllers
php artisan make:controller CategoryController
app/http/controllerCategoryController.php
<?php
namespace AppHttpControllers;
use AppModelsCategory;
use IlluminateHttpRequest;
use IlluminateSupportFacadesRoute;
class CategoryController extends Controller
{
public perform index()
{
return view('index');
}
public perform retailer(Request $request)
{
$enter = $request->all();
$knowledge = [];
$knowledge['name'] = json_encode($enter['name']);
Class::create($knowledge);
return response()->json(['success'=>'Recoreds inserted']);
}
}
Step 6:- Create Blade Views
On this step, create one blade views file. assets/views folder and create the blade view file:
Create file index.blade.php and add code:
<!DOCTYPE html>
<html>
<head>
<title>Laravel Eight Multiselect Dropdown with Checkbox In Bootstrap 4</title>
<meta charset="utf-8">
<meta title="viewport" content material="width=device-width, initial-scale=1">
<hyperlink rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<hyperlink rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" />
<meta title="csrf-token" content material="{{ csrf_token() }}">
</head>
<physique fashion="background: #8ab4e8;">
<div class="container" >
<h2 align="middle">Laravel Eight Multiselect Dropdown with Checkbox In Bootstrap 4</h2>
<kind technique="submit" id="category_form">
<div class="form_select">
<label>Choose</label>
<choose id="class" title="title[]" a number of class="form-select" >
<choice worth="Codeigniter">Codeigniter</choice>
<choice worth="CakePHP">CakePHP</choice>
<choice worth="Laravel">Laravel</choice>
<choice worth="YII">YII</choice>
<choice worth="Zend">Zend</choice>
<choice worth="Symfony">Symfony</choice>
<choice worth="Phalcon">Phalcon</choice>
<choice worth="Slim">Slim</choice>
</choose>
</div>
<div class="form-group">
<enter sort="submit" class="btn btn-primary" title="submit" worth="Submit" />
</div>
</kind>
</div>
<fashion>
kind#category_form {
background: #f2f2f2;
padding: 50px;
width: 50%;
margin: Zero auto;
}
.form-group {
text-align: proper;
}
button.multiselect.dropdown-toggle.btn.btn-default {
border: 1px stable;
margin: Zero 0 10px;
show: flex;
align-items: middle;
justify-content: space-between;
}
</fashion>
</physique>
<script>
$(doc).prepared(perform(){
$('#class').multiselect({
nonSelectedText: 'Choose class',
enableFiltering: true,
enableCaseInsensitiveFiltering: true,
buttonWidth:'400px'
});
$('#category_form').on('submit', perform(occasion){
occasion.preventDefault();
var form_data = $(this).serialize();
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content material')
}
});
$.ajax({
url:"{{ url('retailer') }}",
technique:"POST",
knowledge:form_data,
success:perform(knowledge)
{
$('#class choice:chosen').every(perform(){
$(this).prop('chosen', false);
});
$('#class').multiselect('refresh');
alert(knowledge['success']);
}
});
});
});
</script>
</html>
Step 7:- Run Growth Server
php artisan serve
http://127.0.0.1:8000/cat
Komentar
Posting Komentar