© 2026 Hedgehog Software, LLC

TwitterGitHubDiscord
More
CommunitiesDocsAboutTermsPrivacy
Search
Star
Setup for Free
FilamentF
Filament•7mo ago•
6 replies
Felix

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);
    }
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>

<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
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')
    ];
}
Jump to solution
Filament banner
FilamentJoin
A powerful open source UI framework for Laravel • Build and ship admin panels & apps fast with Livewire
20,307Members
Resources
Was this page helpful?

Similar Threads

Recent Announcements

Similar Threads

Livewire form submit button to Custom page header
FilamentFFilament / ❓┊help
3y ago
EditForm - can't submit form action on set on form header actions
FilamentFFilament / ❓┊help
3y ago
Disabling Submit Action on Action With Custom Modal
FilamentFFilament / ❓┊help
3y ago
Reset custom table header action modal form
FilamentFFilament / ❓┊help
2y ago