Add/remove multiple input fields dynamically with Jquery Laravel 5.8 Example

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

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

Leave a Reply

Your email address will not be published. Required fields are marked *