Join WhatsApp ChannelJoin Now

Laravel 8 Add/remove Multiple Input Fields using Jquery


Today, i we will show you laravel 8 add/remove multiple input fields using jquery. This article will give you simple example of laravel 8 add/remove multiple input fields using jquery. you will learn laravel 8 add/remove multiple input fields using jquery. So let’s follow few step to create example of laravel 8 add/remove multiple input fields using jquery.

Laravel 8 Add/remove Multiple Input Fields using Jquery

Step 1: Install Laravel

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

Step 2: Database Configuration

DB_DATABASE=database name
DB_USERNAME=database username
DB_PASSWORD=database password

Step 3: Create Table and Model

open a command and run the following command:

php artisan make:model Contact -m



namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Contact extends Model
    use HasFactory;
	protected $fillable = [
        'title', 'description'


  public function up()
        Schema::create('todos', function (Blueprint $table) {
php artisan migrate

Step 4: Create Route

use App\Http\Controllers\ContactController;

Route::get('input-fields', [ContactController::class, 'index']);
Route::post('input-fields', [ContactController::class, 'store']);

Step 5: Create Controller


namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Contact;

use Illuminate\Support\Facades\Validator;
class ContactControllerextends Controller
     * Display a listing of the resource.
     * @return \Illuminate\Http\Response
    public function index() 
        return view("input-fields");
    public function store(Request $request)
            'moreFields.*.title' => 'required',
            'moreFields.*.description' => 'required',
        foreach ($request->moreFields as $key => $value) {
        return back()->with('success', 'Todos Has Been Created Successfully.');

Step 6: Create Blade

<!DOCTYPE html>
<title>Laravel 8 Add/remove Multiple Input Fields using Jquery</title>
<link rel="stylesheet" href="">
<script src=""></script>
<script src=""></script>
<meta name="csrf-token" content="{{ csrf_token() }}">
<div class="container">
<div class="card mt-3">
<div class="card-header"><h2>Laravel 8 Add/remove Multiple Input Fields using Jquery</h2></div>
<div class="card-body">
<form action="{{ url('input-fields') }}" method="POST">
@if ($errors->any())
<div class="alert alert-danger">
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@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>
<table class="table table-bordered" id="dynamicAddRemove">  
<td><input type="text" name="moreFields[0][title]" placeholder="Enter title" class="form-control" /></td>  
<td><input type="text" name="moreFields[0][description]" placeholder="Enter description" class="form-control" /></td>  
<td><button type="button" name="add" id="add-btn" class="btn btn-success">Add More</button></td>  
<button type="submit" class="btn btn-success">Save</button>
<script type="text/javascript">
var i = 0;
$("#dynamicAddRemove").append('<tr><td><input type="text" name="moreFields['+i+'][title]" placeholder="Enter title" class="form-control" /></td><td><input type="text" name="moreFields['+i+'][description]" placeholder="Enter description" class="form-control" /></td><td><button type="button" class="btn btn-danger remove-tr">Remove</button></td></tr>');
$(document).on('click', '.remove-tr', function(){  

Step 7: Run Server

php artisan serve

Recommended Posts