Multiple forms in custom page

I have two forms. But when pressing submit both forms get's triggered.

class EditProfile extends Page implements HasForms
{
    public ?array $profileData = [];
    public ?array $passwordData = [];

    protected function getForms(): array
    {
        return [
            'editProfileForm',
            'editPasswordForm',
        ];
    }

    public function editProfileForm(Form $form): Form
    {
        profile form
    }

    public function editPasswordForm(Form $form): Form
    {
        password form
    }

    public function updateProfile(): void
    {
        update profile login
    }

    public function updatePassword(): void
    {
        update password logic
    }

    protected function getUpdateProfileFormActions(): array
    {
        return [
            Action::make('updateProfileAction')
                ->label(__('filament-panels::pages/auth/edit-profile.form.actions.save.label'))
                ->submit('updateProfile'),
        ];
    }

    protected function getUpdatePasswordFormActions(): array
    {
        return [
            Action::make('updatePasswordAction')
                ->label(__('filament-panels::pages/auth/edit-profile.form.actions.save.label'))
                ->submit('updatePassword'),
        ];
    }
}

class EditProfile extends Page implements HasForms
{
    public ?array $profileData = [];
    public ?array $passwordData = [];

    protected function getForms(): array
    {
        return [
            'editProfileForm',
            'editPasswordForm',
        ];
    }

    public function editProfileForm(Form $form): Form
    {
        profile form
    }

    public function editPasswordForm(Form $form): Form
    {
        password form
    }

    public function updateProfile(): void
    {
        update profile login
    }

    public function updatePassword(): void
    {
        update password logic
    }

    protected function getUpdateProfileFormActions(): array
    {
        return [
            Action::make('updateProfileAction')
                ->label(__('filament-panels::pages/auth/edit-profile.form.actions.save.label'))
                ->submit('updateProfile'),
        ];
    }

    protected function getUpdatePasswordFormActions(): array
    {
        return [
            Action::make('updatePasswordAction')
                ->label(__('filament-panels::pages/auth/edit-profile.form.actions.save.label'))
                ->submit('updatePassword'),
        ];
    }
}

Solution:

remove catch (Exception $e) if you want to keep try catch

Jump to solution

32 Replies

krekasOP•2y ago

The blade file

<x-filament-panels::page>
    <x-filament-panels::form wire:submit="updateProfile">
        {{ $this->editProfileForm }}

        <x-filament-panels::form.actions
            :actions="$this->getUpdateProfileFormActions()"
        />
    </x-filament-panels::form>

    <x-filament-panels::form wire:submit="updatePassword">
        {{ $this->editPasswordForm }}

        <x-filament-panels::form.actions
            :actions="$this->getUpdatePasswordFormActions()"
        />
    </x-filament-panels::form>
</x-filament-panels::page>

<x-filament-panels::page>
    <x-filament-panels::form wire:submit="updateProfile">
        {{ $this->editProfileForm }}

        <x-filament-panels::form.actions
            :actions="$this->getUpdateProfileFormActions()"
        />
    </x-filament-panels::form>

    <x-filament-panels::form wire:submit="updatePassword">
        {{ $this->editPasswordForm }}

        <x-filament-panels::form.actions
            :actions="$this->getUpdatePasswordFormActions()"
        />
    </x-filament-panels::form>
</x-filament-panels::page>

Anyone?

Dennis Koch•2y ago

You should use a <button type="submit"> instead of the actions.

krekasOP•2y ago

tried that. same result

Dennis Koch•2y ago

So you removed the actions? Can you try to use a <form> instead of <x-filament-panels::form>? Also check your HTML source code for nested forms.

krekasOP•2y ago

form the form seeing them seperate

krekasOP•2y ago

making blade like so doesn't change anything

<x-filament-panels::page>
    <form wire:submit="updateProfile">
        {{ $this->editProfileForm }}

        <button type="submit">Submit</button>
    </form>

    <form wire:submit="updatePassword">
        {{ $this->editPasswordForm }}

        <button type="submit">Submit</button>
    </form>
</x-filament-panels::page>

<x-filament-panels::page>
    <form wire:submit="updateProfile">
        {{ $this->editProfileForm }}

        <button type="submit">Submit</button>
    </form>

    <form wire:submit="updatePassword">
        {{ $this->editPasswordForm }}

        <button type="submit">Submit</button>
    </form>
</x-filament-panels::page>

of course using button like this doesn't have styling

Dennis Koch•2y ago

Is wire:submit.prevent default now in LW v3? Because it's still present at the bottom but not in your code.

krekasOP•2y ago

yes it is

Dennis Koch•2y ago

Okay. I have no idea then, sorry.

krekasOP•2y ago

I guess then I need to make an issue with the demo repo

Dennis Koch•2y ago

Yes. Best to use a fresh install and a minimal form setup to compare whether it's really an issue,

LeandroFerreira•2y ago

weird. The html should have <form wire:submit="updateProfile">...

krekasOP•2y ago

it has at the end

LeandroFerreira•2y ago

nope.. if you have <form wire:submit="updateProfile"> it should render exactly this

krekasOP•2y ago

if you mean without alpine directives then it is just like if I don't use blade component for the form

krekasOP•2y ago

LeandroFerreira•2y ago

yes, because you did

<x-filament-panels::page>
    <form wire:submit="updateProfile">
        {{ $this->editProfileForm }}

        <button type="submit">Submit</button>
    </form>

    <form wire:submit="updatePassword">
        {{ $this->editPasswordForm }}

        <button type="submit">Submit</button>
    </form>
</x-filament-panels::page>

<x-filament-panels::page>
    <form wire:submit="updateProfile">
        {{ $this->editProfileForm }}

        <button type="submit">Submit</button>
    </form>

    <form wire:submit="updatePassword">
        {{ $this->editPasswordForm }}

        <button type="submit">Submit</button>
    </form>
</x-filament-panels::page>

right? what is the result when you submit?

krekasOP•2y ago

the same as with using components

LeandroFerreira•2y ago

ok but you have two methods. What is the result if you do this?

public function updateProfile(): void
{
    dump('profile form');
}

public function updatePassword(): void
{
    dump('password form');
}

public function updateProfile(): void
{
    dump('profile form');
}

public function updatePassword(): void
{
    dump('password form');
}

krekasOP•2y ago

dumps as expected

LeandroFerreira•2y ago

both forms get's triggered in the same time? I didn't understand when you said: But when pressing submit both forms get's triggered.

krekasOP•2y ago

for password form i have validation like current password, same for password confirmation it i enter anything in password inputs and press submit for this form it should show validation errors but instead it submits the first form also i can see that both submit buttons are triggered of changing colors if you want here's demo repo https://github.com/krekas/filament-multiple-forms-test

LeandroFerreira•2y ago

remove try catch

public function updateProfile(): void
{
    $data = $this->editProfileForm->getState();
    ...
}

public function updatePassword(): void
{
    $data = $this->editPasswordForm->getState();
    ...
}

public function updateProfile(): void
{
    $data = $this->editProfileForm->getState();
    ...
}

public function updatePassword(): void
{
    $data = $this->editPasswordForm->getState();
    ...
}