Add/remove multiple input fields dynamically with Jquery Laravel Example with Full Source code. : Create Add/Remove Multiple Dynamically Input Fields In Javascript Or Jquery
Table of Contents
Add/remove multiple input fields dynamically with Jquery Laravel 5.8 Example
Step 1 : Install Laravel
composer create-project --prefer-dist laravel/laravel itsolutionstuck
Step 2: Database Configuration
.env
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=here your database name(itsolutionstuck) DB_USERNAME=here database username(root) DB_PASSWORD=here database password(root)
Step 3: Create shop_stocks Table and Model
php artisan make:migration create_shop_stocks_table
<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateShopStocksTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('shop_stocks', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('name');
$table->integer('qty');
$table->integer('price');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('shop_stocks');
}
}
php artisan migrate php artisan make:model ShopStock
app/ShopStock.php
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class ShopStock extends Model
{
public $table = "shop_stocks";
public $fillable = ['name', 'qty', 'price'];
}
Step 4: Add Routes
routes/web.php
Route::get("addextra","ShopExtraAddController@extraAdd");
Route::post("addextra","ShopExtraAddController@extraAddPost")->name('addextraPost');
Step 5: Create ShopExtraAddController
php artisan make:controller ShopExtraAddController
1)extraAdd()
2)extraAddPost()
So, let’s copy bellow source code and update on ShopExtraAddController.php file.
app/Http/Controllers/ShopExtraAddController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\ShopStock;
class ShopExtraAddController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function extraAdd()
{
return view("extraAdd");
}
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function extraAddPost(Request $request)
{
$request->validate([
'addextra.*.name' => 'required',
'addextra.*.qty' => 'required',
'addextra.*.price' => 'required',
]);
foreach ($request->addextra as $key => $value) {
ShopStock::create($value);
}
return back()->with('success', 'Record Created Successfully.');
}
}
Step 6: Create Blade File
resources/views/extraAdd.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Add/remove multiple input fields dynamically with Jquery Laravel 5.8 - https://www.itsolutionstuck.com/</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 5.8</h2>
<form action="{{ route('addextraPost') }}" 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>Qty</th>
<th>Price</th>
<th>Action</th>
</tr>
<tr>
<td><input type="text" name="addextra[0][name]" placeholder="Enter your Name" class="form-control" /></td>
<td><input type="text" name="addextra[0][qty]" placeholder="Enter your Qty" class="form-control" /></td>
<td><input type="text" name="addextra[0][price]" placeholder="Enter your Price" 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="addextra['+i+'][name]" placeholder="Enter your Name" class="form-control" /></td><td><input type="text" name="addextra['+i+'][qty]" placeholder="Enter your Qty" class="form-control" /></td><td><input type="text" name="addextra['+i+'][price]" placeholder="Enter your Price" 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>
http://localhost:8000/addextra