Post Details
05
Oct
How to make form submit in laravel livewire example
Hi Guys,
In this quick example, we will see How to make a form submit in Laravel Livewire example. it's a simple example of creating a form with Laravel Livewire. you'll learn the Laravel Livewire tutorial. I want to show you how to install Livewire to Laravel. Let's see below the Laravel livewire example.
We can use this example with Laravel 6, Laravel 7, Laravel 8, Laravel 9, Laravel 10, and Laravel 11 versions.
Step 1: Install Laravel
composer create-project laravel/laravel example-app
Step 2: Create Migration and Model
php artisan make:model Contact -m
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('contacts', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->string('email');
$table->text('message');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('contacts');
}
}
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Contact extends Model
{
use HasFactory;
/**
* Write code on Method
*
* @return response()
*/
protected $fillable = [
'name', 'email', 'message'
];
}
php artisan migrate
Step 3: Install Livewire
composer require livewire/livewire
Step 4: Create Component
php artisan make:livewire contact-form
app/Http/Livewire/ContactForm.php
resources/views/livewire/contact-form.blade.php
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\Contact;
class ContactForm extends Component
{
public $name;
public $email;
public $message;
public function submit()
{
$validatedData = $this->validate([
'name' => 'required|min:6',
'email' => 'required|email',
'message' => 'required|min:20',
]);
Contact::create($validatedData);
return redirect()->to('/form');
}
public function render()
{
return view('livewire.contact-form');
}
}
<form wire:submit.prevent="submit">
<div class="form-group">
<label for="exampleInputName">Name</label>
<input type="text" class="form-control" id="exampleInputName" placeholder="Enter name" wire:model="name">
@error('name') <span class="text-danger">{{ $message }}</span> @enderror
</div>
<div class="form-group">
<label for="exampleInputEmail">Email</label>
<input type="text" class="form-control" id="exampleInputEmail" placeholder="Enter name" wire:model="email">
@error('email') <span class="text-danger">{{ $message }}</span> @enderror
</div>
<div class="form-group">
<label for="exampleInputbody">Message</label>
<textarea class="form-control" id="exampleInputbody" placeholder="Enter Body" wire:model="message"></textarea>
@error('message') <span class="text-danger">{{ $message }}</span> @enderror
</div>
<button type="submit" class="btn btn-primary">Save Contact</button>
</form>
Step 5: Create Route
Route::get('/form', function () {
return view('form');
});
Step 6: Create View File
<!DOCTYPE html>
<html>
<head>
<title>How to make form submit in laravel livewire example -omcodingtutorial.com</title>
@livewireStyles
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
<div class="container">
<div class="card">
<div class="card-header">
How to make form submit in laravel livewire example -omcodingtutorial.com
</div>
<div class="card-body">
@livewire('contact-form')
</div>
</div>
</div>
</body>
<script src="{{ asset('js/app.js') }}"></script>
@livewireScripts
</html>
php artisan serve
0 Comments
Leave a Comment