Hello Artisan
In this tutorial i will discuss about dynamically add multiple input fields and submit to database with jquery and laravel. We can see addremove multiple input fields dynamically with jquery laravel from scratch so that we can understand easily.
You can use jQuery only to do laravel add more fields example in your application. But in this example i will use handlebars js as well as jQuery to create laravel dynamic form fields validation example.
I also validate form and then save it into database. Sometimes we need it in our application like social list field or task list etc. That situation we can create this add dynamically more then one fields with laravel jQuery and handlebars js.
Simply in this example tutorial i will use a Task model to save form data that contains two filed. one is task_name and other is cost. Then we save it into database. See the preview of this tutorial.
Task Form
Task Form with Error Message
Task Form After Clicking Add More Button With Value
Fianlly Save into Database
Step 1 : Install Laravel Application
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
Read also : Dynamically Add or Remove Input Fields using JQuery in Laravel 7.x
database/migrations/create_task_table
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateTasksTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('tasks', function (Blueprint $table) {
$table->id();
$table->string('task_name');
$table->integer('cost');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schem
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;
Route::get('/', function () {
return view('welcome');
})->name('task');
Route::post('/',function(Request $request) {
$request->validate([
'task_name' => 'required',
'cost' => 'required'
]);
$count = count($request->task_name);
for ($i=0; $i < $count; $i++) {
$task = new Task();
$task->task_name = $request->task_name[$i];
$task->cost = $request->cost[$i];
$task->save();
}
return redirect()->back();
});
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 : Database Transaction | When and How to Use Database Transactions in Laravel
And you will find Laravel - dynamically add or remove input fields using JQuery example form. I hope it can help you.
#laravel #laravel-5 #laravel-6 #laravel-7 #laravel-7x #add-more-jquery #jquery #handlebars-js #example