Laravel 8.x Dynamically Add Or Remove Input Fields Using JQuery

Today, i am going to disucss with you how to add more fields using jquery in laravel 8 application, i also implemented Dynamically Generated Fields validation, so if you have add dynamically more then one fields with laravel 8 and need form validation then you are at right place.

We sometime need to generate dynamic add more fields using jquery in your laravel application. List if you have to add more then one stock with date wise and need to add in single form. So basically you require to add more function that way client can add and remove dynamically their stock with date. So here i will show you very simple and easy example for dynamic add or remove input fields in laravel 8 application.

In this example, i created "task" table and it's model. I created simple form and there you can add or remove name input fields and click on submit button insert those records in database table. I also implemented dynamic validation of laravel. So just follow thebellow step to complete it and get full example like as bellow screen shot.

Step 1 : Install Laravel 

I am going to show you from scratch, So we require to get fresh current Laravel 7.x  version application using bellow command, So open your terminal and run

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

Step 2: Create Task Table and Model

We are going to create add more dynamic field application for task list. So we have to create migration for task list table using Laravel 7.x  php artisan command, so first fire bellow command.

php artisan make:model Task -m

Paste this code to your migration table

database/migrations/create_task_table

public function up()
{
        Schema::create('tasks', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->timestamps();
        });
}

As we have to save add more input field data in our database to we need to setup our Task model.

app/Task.php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Task extends Model
{
    protected $guarded = [];

}

Step 3: Create Routes

In this is step we need to add two route for add more fields example. so open your routes/web.php file and add following route. As this is a example tutorial so i won't use any controller. I simply do it from web.php file.

routes/web.php

use App\Task;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use Illuminate\Support\Facades\Validator;


Route::get('/', function () {
    return view('welcome');
})->name('task');

Route::post('/',function(Request $request) {
    
    $data = [];

    foreach($request->input('name') as $key => $value) {
        $data["name.{$key}"] = 'required';
    }

    $validator = Validator::make($request->all(), $data);

    if ($validator->passes()) {

        foreach($request->input('name') as $key => $value) {
            Task::create(['name'=>$value]);
        }

        return response()->json(['success'=>'done']);
    }

    return response()->json(['error'=>$validator->errors()->all()]);
});

Step 4: Create Blade File

Now we need to show our add more field form in our welcome blade file. In this step we have to create just welcome.blade.php blade file.

So let's just create following file and put bellow code.

resources/views/welcome.blade.php

Now visit 

Read also : Laravel 7.x Dynamically Add more Input Fields using Handlebars Js

And you will find Laravel - dynamically add or remove input fields using JQuery. I hope it can help you.