Filament•3mo ago

Submit a form with a header Action on a custom page

Is it possible to use a headerAction to submit a form on a custom page? I want to move the submit action to the top right of the page in the header. but I don't know what the trick is to then submit the form with the button. I have tried JS to submit the form but, I assume that a JS submit doesn't work with wire:submit. I have the following parts in my code: in the Class:

protected function getHeaderActions(): array
    {
        return [
            Action::make('save')->label('Opslaan')->keyBindings(['command+s', 'ctrl+s']),
        ];

public function form(Form $form): Form
    {
        return $form
            ->schema([...])
            ->statePath('data')
            ->model($this->course);
    }

in the blade:


<x-filament-panels::page class="space-y-6">
    <form wire:submit="save" class="space-y-6">
        {{ $this->form }}
    </form>
</x-filament-panels::page>

Solution:

Ok try this ```php protected function getHeaderActions(): array { return [...

Jump to solution

4 Replies

ChesterS•3mo ago

Try

->submit('save')

->submit('save')

On your action. If it doesn't work, try the following Add an ID to your form

<x-filament-panels::page class="space-y-6">
    <form wire:submit="save" class="space-y-6" id="MY-FORM-ID">
        {{ $this->form }}
    </form>
</x-filament-panels::page>

<x-filament-panels::page class="space-y-6">
    <form wire:submit="save" class="space-y-6" id="MY-FORM-ID">
        {{ $this->form }}
    </form>
</x-filament-panels::page>

and then try this

Action::make('save')
    ->submit('MY-FORM-ID');

Action::make('save')
    ->submit('MY-FORM-ID');

Sorry, I haven't worked with custom pages in a long time, so something might be wrong, but I hope it helps ¯\_(ツ)_/¯

FelixOP•3mo ago

Thanks, But sadly it didn't work.

Solution

ChesterS•3mo ago

Ok try this

protected function getHeaderActions(): array
{
    return [
        Action::make('save')
            ->extraAttributes([
                'wire:click.prevent' => 'save',
            ])
            ->submit('MY-FORM-ID')
    ];
}

protected function getHeaderActions(): array
{
    return [
        Action::make('save')
            ->extraAttributes([
                'wire:click.prevent' => 'save',
            ])
            ->submit('MY-FORM-ID')
    ];
}

FelixOP•3mo ago

That did the trick, Thanks.

Gaming

Programming

Submit a form with a header Action on a custom page

Did you find this page helpful?