Laravel 8 Add/remove Multiple Input Fields using Jquery
Hello,
As we speak, i we are going to present you laravel eight add/take away a number of enter fields utilizing jquery. This text will provide you with easy instance of laravel eight add/take away a number of enter fields utilizing jquery. you’ll be taught laravel eight add/take away a number of enter fields utilizing jquery. So let’s comply with few step to create instance of laravel eight add/take away a number of enter fields utilizing jquery.
Step 1: Set up Laravel
composer create-project --prefer-dist laravel/laravel weblog
Step 2: Database Configuration
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=database identify DB_USERNAME=database username DB_PASSWORD=database password
Step 3: Create Desk and Mannequin
open a command and run the next command:
php artisan make:mannequin Contact -m
app/fashions/Contact.php
<?php
namespace AppModels;
use IlluminateDatabaseEloquentFactoriesHasFactory;
use IlluminateDatabaseEloquentModel;
class Contact extends Mannequin
{
use HasFactory;
protected $fillable = [
'title', 'description'
];
}
database/migrations/create_contact_table.php
public perform up()
{
Schema::create('todos', perform (Blueprint $desk) {
$table->id();
$table->string('title');
$table->textual content('description');
$table->timestamps();
});
}
php artisan migrate
Step 4: Create Route
use AppHttpControllersContactController;
Route::get('input-fields', [ContactController::class, 'index']);
Route::publish('input-fields', [ContactController::class, 'store']);
Step 5: Create Controller
AppHttpControllersContactController
<?php
namespace AppHttpControllers;
use IlluminateHttpRequest;
use AppModelsContact;
use IlluminateSupportFacadesValidator;
class ContactControllerextends Controller
{
/**
* Show a list of the useful resource.
*
* @return IlluminateHttpResponse
*/
public perform index()
{
return view("input-fields");
}
public perform retailer(Request $request)
{
$request->validate([
'moreFields.*.title' => 'required',
'moreFields.*.description' => 'required',
]);
foreach ($request->moreFields as $key => $worth) {
Todo::create($worth);
}
return again()->with('success', 'Todos Has Been Created Efficiently.');
}
}
Step 6: Create Blade
<!DOCTYPE html>
<html>
<head>
<title>Laravel eight Add/take away A number of Enter Fields utilizing Jquery</title>
<hyperlink rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/js/bootstrap.min.js"></script>
<meta identify="csrf-token" content material="{{ csrf_token() }}">
</head>
<physique>
<div class="container">
<div class="card mt-3">
<div class="card-header"><h2>Laravel eight Add/take away A number of Enter Fields utilizing Jquery</h2></div>
<div class="card-body">
<type motion="{{ url('input-fields') }}" technique="POST">
@csrf
@if ($errors->any())
<div class="alert alert-danger">
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
@if (Session::has('success'))
<div class="alert alert-success text-center">
<a href="#" class="shut" data-dismiss="alert" aria-label="shut">×</a>
<p>{{ Session::get('success') }}</p>
</div>
@endif
<desk class="desk table-bordered" id="dynamicAddRemove">
<tr>
<th>Title</th>
<th>Description</th>
<th>Motion</th>
</tr>
<tr>
<td><enter sort="textual content" identify="moreFields[0]Laravel eight Add/take away A number of Enter Fields utilizing Jquery" placeholder="Enter title" class="form-control" /></td>
<td><enter sort="textual content" identify="moreFields[0]Laravel eight Add/take away A number of Enter Fields utilizing Jquery" placeholder="Enter description" class="form-control" /></td>
<td><button sort="button" identify="add" id="add-btn" class="btn btn-success">Add Extra</button></td>
</tr>
</desk>
<button sort="submit" class="btn btn-success">Save</button>
</type>
</div>
</div>
</div>
<script sort="textual content/javascript">
var i = 0;
$("#add-btn").click on(perform(){
++i;
$("#dynamicAddRemove").append('<tr><td><enter sort="textual content" identify="moreFields['+i+']Laravel eight Add/take away A number of Enter Fields utilizing Jquery" placeholder="Enter title" class="form-control" /></td><td><enter sort="textual content" identify="moreFields['+i+']Laravel eight Add/take away A number of Enter Fields utilizing Jquery" placeholder="Enter description" class="form-control" /></td><td><button sort="button" class="btn btn-danger remove-tr">Take away</button></td></tr>');
});
$(doc).on('click on', '.remove-tr', perform(){
$(this).mother and father('tr').take away();
});
</script>
</physique>
</html>
Step 7: Run Server
php artisan serve
Komentar
Posting Komentar