lara28580's avatar

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.');
    }
0 likes
9 replies
lara28580's avatar

@Snapey

    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>
Snapey's avatar

how come you don't have a render method?

lara28580's avatar

@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');
    }
}
kiwi0134's avatar

@Snapey You don't need a render method inside Livewire components if the view-filename follows the convention.

@smoketm What version of Livewire are you using? Is your UsesSpamProtection trait probably overriding the reset method?

lara28580's avatar

Had to remove alpine js from app.js. Now its working

Please or to participate in this conversation.