Level 1
try adding @csrf
Jan 11, 2024
14
Level 2
Livewire wire:submit doesn't hit the method in livewire version 3 components
So I just created a new Laravel project and then installed Livewire via composer. I created two components, HomeComponent and ContactFormComponent. (I have excluded HomeComponent coz it has no effect on this issue).
ContactFrom Component
All required Namespaces have been imported
class ContactForm extends Component
{
public $email;
public $message;
public function save(): void
{
// $this->validate([
// 'email' => 'required|max:50|email',
// 'message' => 'required|min:5|max:350',
// ]);
I had to comment the validation block just to use dd(' ') below as a test
dd('Form submitted!');
}
#[Title('Contact Us')]
public function render()
{
return view('livewire.contact-form');
}
}
Blade Layout File (layout.app) - I have edited this in livewire config file
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ $title . ' - ' . config ('app.name') ?? config ('app.name') }}</title>
</head>
<body>
<main>
<div class="container">
<div class="content">
@yield('content')
</div>
</div>
</main>
</body>
</html>
Contact Form Component view file
<div>
@section('content')
<div class="left-side">
<div>
<div>Contact Us</div>
</div>
</div>
<div class="right-side">
<div>
Onclicking this link, Livewire navigates as SPA, so Livewire script is loaded
<a href="{{route('app.home')}}" wire:navigate class="btn">Home</a>
</div>
<form wire:submit="save">
<div class="input-box">
<input type="email" wire:model="email" placeholder="Enter your email" />
@error('email') <div class="input_error">{{ $message }}</div>@enderror
</div>
<div class="input-box message-box">
<textarea wire:model="message" placeholder="Enter your message" rows="8"></textarea>
@error('message') <div class="input_error">{{ $message }}</div> @enderror
</div>
<div class="button">
<span class="processing" wire:loading>Sending message...</span>
<button class="send" type="submit" wire:loading.remove>Send</button>
</div>
</form>
</div>
@endsection
</div>
@assets
<style>
styles for the above form placed here...
</style>
@endassets
My issue is once I click the send button, the page reloads and the address bar returns the url below..
<div>http://autoshops.test/message_us?</div>
I have checked the network tab and found no issue, all I see is every url keeps loading up once again. Please I need help here. Thanks a lot.
Level 2
@Makaram I just did this, it reloaded as usual and returned this url...
<div>http://autoshops.test/message_me?_token=7s5a1g66IX7kpjRxX1PzQ6dmZ5zmvHy7dhgOjp1E</div>
Level 37
@cd4success Put it within the <form>
Level 8
@nexxai @cd4success You do not need the csrf-token inside your livewire form. It's not a form submission and doesn't work as one.
A missing csrf token would actually trigger an entirely different exception.
Level 37
@kiwi0134 oh man I didn't even catch that this was in a Livewire form.
@cd4success yeah, definitely do not use the CSRF token.
Level 70
@cd4success Can you try with this?
<form wire:submit.prevent="save">
Level 2
@tisuchi Just did this as well and it keeps redirecting me back...
<div>http://autoshops.test/message_me?_token=7s5a1g66IX7kpjRxX1PzQ6dmZ5zmvHy7dhgOjp1E</div>
Level 70
@cd4success Hum... it seems you didn't import livewire. Is that?
@livewireScripts
Level 2
@tisuchi It's true, I didn't import Livewire but I read in the documentation it's automatically imported expecially since version 3. I'm importing it right away and will test as well.
Level 2
@tisuchi Oops! After importing @livewireScripts, all the wire: on HTML elements were no more effective. The div blocks for spinners and progress were showing up. So I've removed it.
Level 2
Could the issue be because I didn't add a post route that corresponds with the save method in Livewire componenet? (Is this required?)
Here's my route/web.php
Route::get('/', Home::class)->name('app.home');
Route::get('/message_us', ContactForm::class)->name('app.contact');
Level 2
So I've been able to make Livewire " wire : submit " work in my Laravel project but the solution was that I had to create a new Laravel project, installed Livewire and then used the default layout. Upon submitting the form, I got a dumped " Form submitted " as expected.
I really don't know why the custom layout didn't work even after trying on diferent browsers, it just keeps redirecting me back after submitting.
Recap for anyone that comes across this..
--- My ContactForm component didn't change. https://livewire.laravel.com/docs/components#full-page-components
--- I had to revert the " wire: " below From...
<form wire:submit.prevent="save">...</form>
Back to initial... (because Livewire v3 intercepts the request automatically on submit events) https://livewire.laravel.com/docs/wire-submit
<form wire:submit="save">...</form>
Do note that the " save " is arbitrary, so you can use any name your desire in your Livewire component
--- I didn't touch my route/web.php file (Only Component classes with their corresponding url should be there)
--- Seems placing @csrf in the form is not required. https://livewire.laravel.com/docs/forms#submitting-a-form
--- I used the default Livewire layout by running and then editing to my taste according to the docs .. https://livewire.laravel.com/docs/components#layout-files
php artisan livewire:layout
Thanks @makaram and @tisuchi for taking your precious time to help me. I so much appreciate it.
1 like
Level 25
Are you using breeze? It already has Alpine.js so it duplicates with the one inside Livewire. https://laraveldaily.com/post/livewire-3-laravel-breeze-error-alpine-js-conflict
Level 2
@krekas No, I'm not using Laravel Breeze. It's purely Laravel Livewire.
Please or to participate in this conversation.