cant tell from that snippet
Jan 18, 2024
9
Level 10
Can't clear fields in form with livewire
I am trying to clear fields after submitting a form with livewire, but I can't get this to work. I am using the reset function trying to achieve this. What I am doing wrong here?
public function submit()
{
$this->protectAgainstSpam(); // if is spam, will abort the request
$validatedData = $this->validate();
Partner::create($validatedData);
Mail::to(config('services.office.email'))->send(new MailPartnerForm($validatedData));
$this->reset('name', 'company', 'postion', 'email', 'message', 'call');
$this->dispatch('success-message', message: 'Die Nachricht wurde erfolgreich versendet.');
}
Level 122
Level 10
use UsesSpamProtection;
public $name;
public $company;
public $position;
public $email;
public $message;
public $call = false;
public HoneypotData $extraFields;
protected $rules = [
'name' => 'required|string|max:255',
'company' => 'required|string|max:255',
'position' => 'required|string|max:255',
'email' => 'required|email|string|max:255',
'message' => 'required|string|max:10000',
'call' => 'required|boolean',
];
public function mount()
{
$this->extraFields = new HoneypotData();
}
public function updated($propertyName)
{
$this->validateOnly($propertyName);
}
public function submit()
{
$this->protectAgainstSpam(); // if is spam, will abort the request
$validatedData = $this->validate();
Partner::create($validatedData);
Mail::to(config('services.office.email'))->send(new MailPartnerForm($validatedData));
$this->reset('name', 'company', 'position', 'email', 'message', 'call');
$this->dispatch('success-message', message: 'Die Nachricht wurde erfolgreich versendet.');
}
view
<form wire:submit="submit" class="max-w-lg mx-auto w-full space-y-5">
<x-honeypot livewire-model="extraFields" />
<x-livewire.success />
<div>
<label for="name" class="font-medium text-lg text-gray block">{{ __('Name') }}*</label>
<input id="name" wire:model.live="name" required type="text"
class="mt-2 block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-fuchsia-600 sm:text-sm sm:leading-6 outline-none">
@error('name')
<span class="text-sm text-red-500">{{ $message }}</span>
@enderror
</div>
<div>
<label for="company" class="font-medium text-lg text-gray block">{{ __('Company name') }}*</label>
<input id="company" wire:model.live="company" required type="text"
class="mt-2 block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-fuchsia-600 sm:text-sm sm:leading-6 outline-none">
@error('company')
<span class="text-sm text-red-500">{{ $message }}</span>
@enderror
</div>
<div>
<label for="position"
class="font-medium text-lg text-gray block">{{ __('Your position at the company') }}*</label>
<input id="position" wire:model.live="position" required type="text"
class="mt-2 block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-fuchsia-600 sm:text-sm sm:leading-6 outline-none">
@error('position')
<span class="text-sm text-red-500">{{ $message }}</span>
@enderror
</div>
<div>
<label for="email" class="font-medium text-lg text-gray block">{{ __('Email address') }}*</label>
<input id="email" wire:model.live="email" required type="email"
class="mt-2 block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-fuchsia-600 sm:text-sm sm:leading-6 outline-none">
@error('email')
<span class="text-sm text-red-500">{{ $message }}</span>
@enderror
</div>
<div>
<label for="message" class="font-medium text-lg text-gray block">What are you interested in/do you have any
questions about the program?*</label>
<textarea id="message" wire:model.live="message" rows="3" required type="text"
class="mt-2 block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-fuchsia-600 sm:text-sm sm:leading-6 outline-none"></textarea>
@error('message')
<span class="text-sm text-red-500">{{ $message }}</span>
@enderror
</div>
<div>
<div class="flex items-start gap-3">
<input type="checkbox" id="call" wire:model.live="call"
class="h-6 w-6 rounded border-fuchsia-300 text-fuchsia-600 focus:ring-fuchsia-600">
<label for="call" class="leading-6 font-medium text-lg text-gray block">
Willst du einen Termin vereinbaren, um das Programm mit uns zu
besprechen?*
</label>
</div>
@error('call')
<span class="text-sm text-red-500">{{ $message }}</span>
@enderror
</div>
<div>
<x-primary-button type="submit" class="mt-5 px-10 py-3 w-full justify-center">
Partner werden
</x-primary-button>
</div>
Level 122
how come you don't have a render method?
Level 10
@Snapey Sorry I forgot to add
<?php
namespace App\Livewire\Partner;
use App\Mail\PartnerForm as MailPartnerForm;
use App\Models\Partner;
use Illuminate\Support\Facades\Mail;
use Livewire\Component;
use Spatie\Honeypot\Http\Livewire\Concerns\HoneypotData;
use Spatie\Honeypot\Http\Livewire\Concerns\UsesSpamProtection;
class PartnerForm extends Component
{
use UsesSpamProtection;
public $name;
public $company;
public $position;
public $email;
public $message;
public $call = false;
public HoneypotData $extraFields;
protected $rules = [
'name' => 'required|string|max:255',
'company' => 'required|string|max:255',
'position' => 'required|string|max:255',
'email' => 'required|email|string|max:255',
'message' => 'required|string|max:10000',
'call' => 'required|boolean',
];
public function mount()
{
$this->extraFields = new HoneypotData();
}
public function updated($propertyName)
{
$this->validateOnly($propertyName);
}
public function submit()
{
$this->protectAgainstSpam(); // if is spam, will abort the request
$validatedData = $this->validate();
Partner::create($validatedData);
Mail::to(config('services.office.email'))->send(new MailPartnerForm($validatedData));
$this->reset('name', 'company', 'position', 'email', 'message', 'call');
$this->dispatch('success-message', message: 'Die Nachricht wurde erfolgreich versendet.');
}
public function render()
{
return view('livewire.partner.partner-form');
}
}
Level 8
Level 10
Had to remove alpine js from app.js. Now its working
Level 1
in my app.blade i was importing @vite(['resources/css/app.css', 'resources/js/app.js']) and using @livewireScripts wish was causing the problem , if you are using @livewireScripts you dont need to import app.js , just import @vite('resources/css/app.css''])
Please or to participate in this conversation.