Filament•15mo ago

Multiple Filament forms submit at once Livewire

I'm building an booking systeem and using Filament Form in Livewire, for example someone has 3 bookings he needs to register some data to each booking. So i have created an addParticipant Livewire Component and call that in participants.blade.php

            <div class="grid gap-4">
                @foreach($bookings as $booking)
                        @livewire('add-participant', ['booking' => $booking])
                @endforeach
            </div>

            <div class="grid gap-4">
                @foreach($bookings as $booking)
                        @livewire('add-participant', ['booking' => $booking])
                @endforeach
            </div>

Right now it will show three diffrent form, thats good but when i click next page i want that from te form input there will be created 3 participants and attached to the booking but right now i need to save every form individually. AddParticipant.php form()

    public function form(Form $form): Form
    {
        return $form
            ->schema([
                Fieldset::make('')
                    ->schema([
                        Placeholder::make('participant')
                            ->label('Deelnemer #'),
                        Placeholder::make('Course name')
                            ->label($this->booking->course->name),
                        Placeholder::make('date')
                            ->label('van x tot y'),
                        TextInput::make('firstname'),
                        TextInput::make('lastname'),
                        Select::make('gender'),
                        DatePicker::make('birthdate'),
                        Select::make('language'),
                        TextInput::make('phone'),
                        TextInput::make('email'),
                    ])
            ])
            ->statePath('data')
            ->model(Student::class);
    }

    public function form(Form $form): Form
    {
        return $form
            ->schema([
                Fieldset::make('')
                    ->schema([
                        Placeholder::make('participant')
                            ->label('Deelnemer #'),
                        Placeholder::make('Course name')
                            ->label($this->booking->course->name),
                        Placeholder::make('date')
                            ->label('van x tot y'),
                        TextInput::make('firstname'),
                        TextInput::make('lastname'),
                        Select::make('gender'),
                        DatePicker::make('birthdate'),
                        Select::make('language'),
                        TextInput::make('phone'),
                        TextInput::make('email'),
                    ])
            ])
            ->statePath('data')
            ->model(Student::class);
    }

Right now i can click the save button on every form and it will work but that is not what i want, because the user has to press 3 times save and that is a bit to much clicking! 🙂

3 Replies

toeknee•15mo ago

Firstly, make so to name the fieldset don't leave it empty this can cause issues later. Instead of doing it that way.. what above using a wizard and updating afterValidated on each step? So they click through the forms but it seems more natural?

MitchBricks•15mo ago

You could have Livewire trigger the other forms with $this->js(), that is the quick and hacky solution. The better solution would be a repeater field (also in form builder) If you don’t want to use repeater field from Filament you could also use array post field names (e.g. wire:model=firstname.{{ $x }})

pechteltOP•15mo ago

Thanks i will check it Thats also a good option will have a look to that also, thanks for your help today! 🙂

Gaming

Programming

Multiple Filament forms submit at once Livewire