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