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•16mo 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•16mo ago

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

krekasOP•16mo ago

tried that. same result

Dennis Koch•16mo 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•16mo ago

form the form seeing them seperate

krekasOP•16mo 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•16mo ago

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

krekasOP•16mo ago

yes it is

Dennis Koch•16mo ago

Okay. I have no idea then, sorry.

krekasOP•16mo ago

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

Dennis Koch•16mo ago

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

LeandroFerreira•16mo ago

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

krekasOP•16mo ago

it has at the end

LeandroFerreira•16mo ago

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

krekasOP•16mo ago

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

krekasOP•16mo ago

LeandroFerreira•16mo 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•16mo ago

the same as with using components

LeandroFerreira•16mo 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•16mo ago

dumps as expected

LeandroFerreira•16mo 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•16mo 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•16mo 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();
    ...
}