Laravel Dynamically Add or Remove Input Fields using JQuery

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

We may sometime require to generate dynamic add more fields using jquery in your php laravel 6, laravel 7, laravel 8, laravel 9, laravel 10 and laravel 11 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 make very simple and easy example for dynamic add or remove input fields in laravel 5.5 application.

In this example, i created "tagslist" 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 bellow step and get full example like as bellow screen shot.

Preview:

Step 1 : Install Laravel Application

I am going to show you scratch, So we require to get fresh current Laravel 5.5 version application using bellow command, So open your terminal OR command prompt and run bellow command:

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

Step 2: Database Configuration

In this step we have to make database configuration for example database name, username, password etc for our application of laravel 5.5. So let's open .env file and fill all details like as bellow:

.env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=here your database name(blog)
DB_USERNAME=here database username(root)
DB_PASSWORD=here database password(root)

Step 3: Create tagslist Table and Model

we are going to create add more dynamic field application for tagslist. so we have to create migration for tagslist table using Laravel 5.5 php artisan command, so first fire bellow command:

php artisan make:migration create_tagslist_table

After this command you will find one file in following path database/migrations and you have to put bellow code in your migration file for create articles table.

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateTagslistTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('tagslist', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('tagslist');
    }
}

Now run migration my following command:

php artisan migrate

After creating table we have to create model for "tagslist" table so just run bellow command and create new model:

php artisan make:model TagList

Ok, so after run bellow command you will find app/TagList.php and put bellow content in TagList.php file:

app/TagList.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class TagList extends Model
{
    public $table = "tagslist";
    public $fillable = ['name'];
}

Step 4: Add 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.

routes/web.php

Route::get("addmore","HomeController@addMore");
Route::post("addmore","HomeController@addMorePost");

Step 5: Create HomeController

Here, now we should create new controller as HomeController if you haven't created. So run bellow command and create new controller. bellow controller for create resource controller.

php artisan make:controller HomeController

After bellow command you will find new file in this path app/Http/Controllers/HomeController.php.

In this controller will create seven methods by default as bellow methods:

1)addMore()

2)addMorePost()

So, let's copy bellow code and put on HomeController.php file.

app/Http/Controllers/HomeController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\TagList;
use Validator;

class HomeController extends Controller
{

    public function addMore()
    {
        return view("addMore");
    }

    public function addMorePost(Request $request)
    {
        $rules = [];

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

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

        if ($validator->passes()) {

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

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

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

Step 6: Create Blade File

now we move in last step. In this step we have to create just addMore.blade.php blade file.

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

resources/views/addMore.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel - Dynamically Add or Remove input fields using JQuery</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>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
    <meta name="csrf-token" content="{{ csrf_token() }}">
</head>
<body>

<div class="container">
    <h2 align="center">Laravel - Dynamically Add or Remove input fields using JQuery</h2>  
    <div class="form-group">
         <form name="add_name" id="add_name">  

            <div class="alert alert-danger print-error-msg" style="display:none">
            <ul></ul>
            </div>

            <div class="alert alert-success print-success-msg" style="display:none">
            <ul></ul>
            </div>

            <div class="table-responsive">  
                <table class="table table-bordered" id="dynamic_field">  
                    <tr>  
                        <td><input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" /></td>  
                        <td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>  
                    </tr>  
                </table>  
                <input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />  
            </div>

         </form>  
    </div> 
</div>

<script type="text/javascript">
    $(document).ready(function(){      
      var postURL = "<?php echo url('addmore'); ?>";
      var i=1;  

      $('#add').click(function(){  
           i++;  
           $('#dynamic_field').append('<tr id="row'+i+'" class="dynamic-added"><td><input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" /></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');  
      });  

      $(document).on('click', '.btn_remove', function(){  
           var button_id = $(this).attr("id");   
           $('#row'+button_id+'').remove();  
      });  

      $.ajaxSetup({
          headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          }
      });

      $('#submit').click(function(){            
           $.ajax({  
                url:postURL,  
                method:"POST",  
                data:$('#add_name').serialize(),
                type:'json',
                success:function(data)  
                {
                    if(data.error){
                        printErrorMsg(data.error);
                    }else{
                        i=1;
                        $('.dynamic-added').remove();
                        $('#add_name')[0].reset();
                        $(".print-success-msg").find("ul").html('');
                        $(".print-success-msg").css('display','block');
                        $(".print-error-msg").css('display','none');
                        $(".print-success-msg").find("ul").append('<li>Record Inserted Successfully.</li>');
                    }
                }  
           });  
      });  

      function printErrorMsg (msg) {
         $(".print-error-msg").find("ul").html('');
         $(".print-error-msg").css('display','block');
         $(".print-success-msg").css('display','none');
         $.each( msg, function( key, value ) {
            $(".print-error-msg").find("ul").append('<li>'+value+'</li>');
         });
      }
    });  
</script>
</body>
</html>

Now you can run this full example using quick run command of laravel like as bellow:

php artisan serve

Now you can open bellow URL on your browser:

http://localhost:8000/addmore

I hope it can help you...