add/remove multiple input fields dynamically with javascript – Dynamic input field allows providing multiple values in a form. Remove button gets activated when you add an extra field after the first field row.

add/remove multiple input fields dynamically with javascript

Contents

Add/remove multiple input fields dynamically with Jquery Laravel web application. the following example demonstrates how to add/remove multiple input fields dynamically.

Step 1 : Install Laravel

composer create-project --prefer-dist laravel/laravel blog

Step 2: Database Configuration

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=pakainfo_v1
DB_USERNAME=atmiya59852
[email protected]!!

Step 3: Create Item_stocks Table and Model

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'];
   
}

Step 4: Add Routes

routes/web.php

Route::get("dynamicAddedData","[email protected]");
Route::post("dynamicAddedData","[email protected]")->name('dynamicAddedDataPost');

Step 5: Create 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.');
    }
}

Don’t Miss : add/remove multiple input fields dynamically with jquery

Step 6: Create Blade File

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>

I hope you get an idea about add/remove multiple input fields dynamically with javascript.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.