why wouldn't this form submit button work?

Adding a form to a livewire component and have followed the docs exactly, but my form button doesn't submit:

<x-filament::modal slide-over id="create-payment" width="xl">
    <x-slot name="trigger">
        <x-filament::icon-button size="lg" icon="heroicon-o-currency-dollar" tooltip="Create payment" color="success" />
    </x-slot>

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

        <x-slot name="footer">
            <x-filament::button type="submit" class="mt-2 " size="sm">
                Save
            </x-filament::button>

            <button type="button" wire:click="$dispatch('close-modal', { id: 'create-payment'} )" class="self-end rounded-md bg-white mt-10 px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">Close</button>
        </x-slot>
    </form>
    <x-filament-actions::modals />
</x-filament::modal>

<x-filament::modal slide-over id="create-payment" width="xl">
    <x-slot name="trigger">
        <x-filament::icon-button size="lg" icon="heroicon-o-currency-dollar" tooltip="Create payment" color="success" />
    </x-slot>

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

        <x-slot name="footer">
            <x-filament::button type="submit" class="mt-2 " size="sm">
                Save
            </x-filament::button>

            <button type="button" wire:click="$dispatch('close-modal', { id: 'create-payment'} )" class="self-end rounded-md bg-white mt-10 px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">Close</button>
        </x-slot>
    </form>
    <x-filament-actions::modals />
</x-filament::modal>

There's nothing in the network tab indicating that a request is even sent.

Solution:

just needed to add flex flex-col justify-between to my form and a wrapping div around my buttons and now it's working as expected.

Jump to solution

2 Replies

Jon Mason•6mo ago

seems to be the footer slot. When I comment that out, it submits.

Solution

Jon Mason•6mo ago

just needed to add flex flex-col justify-between to my form and a wrapping div around my buttons and now it's working as expected.

Gaming

Programming

why wouldn't this form submit button work?