Add/remove multiple input fields dynamically with Jquery Laravel 5.8

Add/remove multiple input fields dynamically with Jquery Laravel 5.8

In this post we will give you information about Add/remove multiple input fields dynamically with Jquery Laravel 5.8. Hear we will give you detail about Add/remove multiple input fields dynamically with Jquery Laravel 5.8And how to use it also give you demo for it if it is necessary.

Today, i will explain how to add remove input fields dynamically with jquery and submit to database in laravel 5.8 application. we can easily create add more input fields using jquery in laravel 5. we can add remove group of input fields dynamically using jquery in laravel.

we will create dynamic form fields – add & remove with bootstrap 4 and jquery in laravel. you can also use laravel validation for add more input fields.

Add more multiple input fields like sometimes we need to add same information add multiple time with same form input. so we will create table row with input fields and add add more button so when you click on that button then it will append new row with input fields.

Preview:

Step 1 : Install Laravel

I am going to show you scratch, So we require to get fresh current Laravel 5.8 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.8. 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)

Also see:Laravel 5.8 CRUD (Create Read Update Delete) Tutorial For Beginners

Step 3: Create product_stocks Table and Model

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

php artisan make:migration create_product_stocks_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 IlluminateSupportFacadesSchema;

use IlluminateDatabaseSchemaBlueprint;

use IlluminateDatabaseMigrationsMigration;

class CreateProductStocksTable extends Migration

{

/**

* Run the migrations.

*

* @return void

*/

public function up()

{

Schema::create('product_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('product_stocks');

}

}

Now run migration my following command:

php artisan migrate

After creating table we have to create model for “product_stocks” table so just run bellow command and create new model:

php artisan make:model ProductStock

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

app/ProductStock.php

<?php

namespace App;

use IlluminateDatabaseEloquentModel;

class ProductStock extends Model

{

public $table = "product_stocks";

public $fillable = ['name', 'qty', 'price'];

}


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","ProductAddMoreController@addMore");

Route::post("addmore","ProductAddMoreController@addMorePost")->name('addmorePost');

Step 5: Create ProductAddMoreController

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

php artisan make:controller ProductAddMoreController

After bellow command you will find new file in this path app/Http/Controllers/ProductAddMoreController.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 ProductAddMoreController.php file.

app/Http/Controllers/ProductAddMoreController.php

<?php

namespace AppHttpControllers;

use IlluminateHttpRequest;

use AppProductStock;

class ProductAddMoreController extends Controller

{

/**

* Display a listing of the resource.

*

* @return IlluminateHttpResponse

*/

public function addMore()

{

return view("addMore");

}

/**

* Display a listing of the resource.

*

* @return IlluminateHttpResponse

*/

public function addMorePost(Request $request)

{

$request->validate([

'addmore.*.name' => 'required',

'addmore.*.qty' => 'required',

'addmore.*.price' => 'required',

]);

foreach ($request->addmore as $key => $value) {

ProductStock::create($value);

}

return back()->with('success', 'Record Created Successfully.');

}

}

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>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 >

<h2 align="center">Add/remove multiple input fields dynamically with Jquery Laravel 5.8</h2>

<form action="{{ route('addmorePost') }}" method="POST">

@csrf

@if ($errors->any())

<div >

<ul>

@foreach ($errors->all() as $error)

<li>{{ $error }}</li>

@endforeach

</ul>

</div>

@endif

@if (Session::has('success'))

<div >

<a href="#" data-dismiss="alert" aria-label="close">×</a>

<p>{{ Session::get('success') }}</p>

</div>

@endif

<table id="dynamicTable">

<tr>

<th>Name</th>

<th>Qty</th>

<th>Price</th>

<th>Action</th>

</tr>

<tr>

<td><input type="text" name="addmore[0][name]" placeholder="Enter your Name" /></td>

<td><input type="text" name="addmore[0][qty]" placeholder="Enter your Qty" /></td>

<td><input type="text" name="addmore[0][price]" placeholder="Enter your Price" /></td>

<td><button type="button" name="add" id="add" >Add More</button></td>

</tr>

</table>

<button type="submit" >Save</button>

</form>

</div>

<script type="text/javascript">

var i = 0;

$("#add").click(function(){

++i;

$("#dynamicTable").append('<tr><td><input type="text" name="addmore['+i+'][name]" placeholder="Enter your Name" /></td><td><input type="text" name="addmore['+i+'][qty]" placeholder="Enter your Qty" /></td><td><input type="text" name="addmore['+i+'][price]" placeholder="Enter your Price" /></td><td><button type="button" >Remove</button></td></tr>');

});

$(document).on('click', '.remove-tr', function(){

$(this).parents('tr').remove();

});

</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:

Also see:Import and Export CSV file in Laravel 5.8

http://localhost:8000/addmore

I hope it can help you…

Hope this code and post will helped you for implement Add/remove multiple input fields dynamically with Jquery Laravel 5.8. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

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

  +  65  =  74

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US