Add/remove multiple input fields dynamically with Jquery Laravel Example with Full Source code. : Create Add/Remove Multiple Dynamically Input Fields In Javascript Or Jquery
Table of Contents
Add/remove multiple input fields dynamically with Jquery Laravel 5.8 Example
Step 1 : Install Laravel
[php]
composer create-project –prefer-dist laravel/laravel itsolutionstuck
[/php]
Step 2: Database Configuration
.env
[php]
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=here your database name(itsolutionstuck)
DB_USERNAME=here database username(root)
DB_PASSWORD=here database password(root)
[/php]
Step 3: Create shop_stocks Table and Model
[php]
php artisan make:migration create_shop_stocks_table
[/php]
[php]
bigIncrements(‘id’);
$table->string(‘name’);
$table->integer(‘qty’);
$table->integer(‘price’);
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists(‘shop_stocks’);
}
}
[/php]
[php]
php artisan migrate
php artisan make:model ShopStock
[/php]
app/ShopStock.php
[php]
Step 4: Add Routes
routes/web.php
[php]
Route::get(“addextra”,”ShopExtraAddController@extraAdd”);
Route::post(“addextra”,”ShopExtraAddController@extraAddPost”)->name(‘addextraPost’);
[/php]
Step 5: Create ShopExtraAddController
[php]
php artisan make:controller ShopExtraAddController
[/php]
1)extraAdd()
2)extraAddPost()
So, let’s copy bellow source code and update on ShopExtraAddController.php file.
app/Http/Controllers/ShopExtraAddController.php
[php]
validate([
‘addextra.*.name’ => ‘required’,
‘addextra.*.qty’ => ‘required’,
‘addextra.*.price’ => ‘required’,
]);
foreach ($request->addextra as $key => $value) {
ShopStock::create($value);
}
return back()->with(‘success’, ‘Record Created Successfully.’);
}
}
[/php]
Step 6: Create Blade File
resources/views/extraAdd.blade.php
[php]
Add/remove multiple input fields dynamically with Jquery Laravel 5.8
var i = 0;
$("#add").click(function(){
++i;
$("#dynamicTable").append('
'); });
$(document).on('click', '.remove-tr', function(){ $(this).parents('tr').remove(); });
[/php]
[php]
http://localhost:8000/addextra
[/php]