Thêm / xóa nhiều trường nhập liệu động với ứng dụng web Jquery Laravel. Ví dụ sau đây minh họa cách thêm / xóa nhiều trường nhập liệu động.
Bước 1: Cài đặt Laravel
composer create-project --prefer-dist laravel/laravel blog
Bước 2: Cấu hình Cơ sở dữ liệu
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=pakainfo_v1
DB_USERNAME=atmiya59852
DB_PASSWORD=Sku8956@3454!!
Bước 3: Tạo Bảng Item_stocks và Mô hình
php artisan make:migration create_Item_stocks_table
<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateItemStocksTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('Item_stocks', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('name');
$table->integer('quantity');
$table->integer('amount');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('Item_stocks');
}
}
php artisan migrate
php artisan make:model ItemStock
app/ItemStock.php
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class ItemStock extends Model
{
public $table = "Item_stocks";
public $fillable = ['name', 'quantity', 'amount'];
}
Bước 4: Thêm Routes
routes/web.php
Route::get("dynamicAddedData","ItemdynamicAddedDataController@dynamicAddedData");
Route::post("dynamicAddedData","ItemdynamicAddedDataController@dynamicAddedDataPost")->name('dynamicAddedDataPost');
Bước 5: Tạo ItemdynamicAddedDataController
php artisan make:controller ItemdynamicAddedDataController
app/Http/Controllers/ItemdynamicAddedDataController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\ItemStock;
class ItemdynamicAddedDataController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function dynamicAddedData()
{
return view("dynamicAddedData");
}
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function dynamicAddedDataPost(Request $request)
{
$request->validate([
'dynamicAddedData.*.name' => 'required',
'dynamicAddedData.*.quantity' => 'required',
'dynamicAddedData.*.amount' => 'required',
]);
foreach ($request->dynamicAddedData as $key => $value) {
ItemStock::create($value);
}
return back()->with('success', 'Record Created Successfully.');
}
}
Bước 6: Tạo Tệp Blade
resources/views/dynamicAddedData.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Add/remove multiple input fields dynamically with Jquery Laravel 5.8</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div class="container">
<h2 align="center">Add/remove multiple input fields dynamically with Jquery Laravel</h2>
<form action="{{ route('dynamicAddedDataPost') }}" method="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="close" data-dismiss="alert" aria-label="close">×</a>
<p>{{ Session::get('success') }}</p>
</div>
@endif
<table class="table table-bordered" id="dynamicTable">
<tr>
<th>Name</th>
<th>quantity</th>
<th>amount</th>
<th>Action</th>
</tr>
<tr>
<td><input type="text" name="dynamicAddedData[0][name]" placeholder="Enter your Name" class="form-control" /></td>
<td><input type="text" name="dynamicAddedData[0][quantity]" placeholder="Enter your quantity" class="form-control" /></td>
<td><input type="text" name="dynamicAddedData[0][amount]" placeholder="Enter your amount" class="form-control" /></td>
<td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
</tr>
</table>
<button type="submit" class="btn btn-success">Save</button>
</form>
</div>
<script type="text/javascript">
var i = 0;
$("#add").click(function(){
++i;
$("#dynamicTable").append('<tr><td><input type="text" name="dynamicAddedData['+i+'][name]" placeholder="Enter your Name" class="form-control" /></td><td><input type="text" name="dynamicAddedData['+i+'][quantity]" placeholder="Enter your quantity" class="form-control" /></td><td><input type="text" name="dynamicAddedData['+i+'][amount]" placeholder="Enter your amount" class="form-control" /></td><td><button type="button" class="btn btn-danger remove-tr">Remove</button></td></tr>');
});
$(document).on('click', '.remove-tr', function(){
$(this).parents('tr').remove();
});
</script>
</body>
</html>
Hy vọng bạn đã hiểu về cách thêm / xóa nhiều trường nhập liệu động bằng JavaScript.
- Bài đăng blog này được xuất bản ban đầu tại: https://www.pakainfo.com
