Filament•16mo ago

Show a warning before leaving page when you have filled in a form (save/discard changes)

I have a large form where the save button is far down, sometimes people forget to press it and leave that page. Whatever they have filled in will be lost.. Is there any way to give a warning before leaving the page if there has been a field filled in.. I cannot find something in the docs

Solution:

something relevant https://github.com/filamentphp/filament/issues/9992...

GitHub

Wait, don't leave! · Issue #9992 · filamentphp/filament

Alert the user if they have unsaved changes in a form.

Jump to solution

50 Replies

JordyOP•16mo ago

I have experimented with saving ->afterStateUpdated() but that will impact performance in live (not worth it)

Dennis Koch•16mo ago

I tried the same but didn’t find a proper solution. Alpine/LW tracks your dirty state but I don’t think you have access to that. Would be the ideal solution.

JordyOP•16mo ago

I see.. wont waste more time on it then lol Thank you for the reply anyway :)

awcodes•16mo ago

There is an option to make the footer sticky on the page too. That way the form actions would always be visible and the user wouldn’t have to scroll to the bottom of the page.

Andrew Wallo•16mo ago

I guess you can always have a save action for each form section on a page right?

JordyOP•16mo ago

that sucks :P I went with aw's idea for now haha

Andrew Wallo•16mo ago

In my opinion I actually think that would be better design for a long form but oh well

JordyOP•16mo ago

yes.. but it will likely cause users to press save... for each section

Andrew Wallo•16mo ago

Do your users usually have to edit every field on a long form each time they go to it?

JordyOP•16mo ago

no, but we use it for project management.. the form doubles for an information overview of the project :) when the project is created all fields are filled in

Andrew Wallo•16mo ago

Alright well for your use case then sure

josef•16mo ago

There is?

JordyOP•16mo ago

I wrapped the button in a sticky div.. nothing fancy

   
<div class="sticky bottom-0">
    <x-filament::button type="submit" form="save" icon="heroicon-o-check">
    Opslaan
    </x-filament::button>
</div>

   
<div class="sticky bottom-0">
    <x-filament::button type="submit" form="save" icon="heroicon-o-check">
    Opslaan
    </x-filament::button>
</div>

josef•16mo ago

I see, so you overwrote a core template to do this? Or is it form builder standalone without panel?

JordyOP•16mo ago

Location shouldnt matter? forms render without a save button.. just make the button you are using sticky.. I am using the filament button to match the design

josef•16mo ago

Well, the save button for resources in the panels get created by filament, not by me, so I'd have to adapt a core template to make it sticky I think there's a plugin to make the header sticky, but not the footer with the save and cancel buttons

JordyOP•16mo ago

I am on v2.. have not used v3 yet so dunno about panels soon xd

josef•16mo ago

v2 has resources as well, but I guess you use custom forms outside the resources. Thanks anyway, it's a nice solution for that case. Would still be great to have a 'you have unsaved changes' notice somehow 😄

JordyOP•16mo ago

read up in #👹┊off-topic , Dan said a PR would be welcome.. just no clue how it would be done haha

Dennis Koch•16mo ago

I think sticky footer is built into v3. Don’t know the API though.

josef•16mo ago

Only for modals, I think

awcodes•16mo ago

public static bool $formActionsAreSticky = false; not sure it's in the docs that just goes on the Page (create / edit)

gon.exe•16mo ago

Hi guys. Very interesting conversation. I have the same need. Prevent users from leaving the form by displaying an alert message or something similar. This is for v3. Right?

awcodes•16mo ago

yes. it was also in v2 it's scroll based though so you won't see any affect unless your page it long enough to force a scroll

JordyOP•16mo ago

If you find something.. let us know 😂

gon.exe•16mo ago

So is not working for me. I added the code on my create page

awcodes•16mo ago

Working in the demo. Maybe you have cached views

awcodes•16mo ago

you also have to scroll the page for it to show up

josef•16mo ago

It is most certainly not but also doesnt work for me either

awcodes•16mo ago

yea, i tried looking for it it's working in the demo make sure you're adding it to CreateRecord and EditRecord it doesn't work on RecordResource

josef•16mo ago

yeah, it's on the edit page, and there's the corresponding alpine and css in the page source now But it's just not sticky 🤨

awcodes•16mo ago

not sure what to tell you. lol. maybe a plugin conflict with styles. ?

gon.exe•16mo ago

I tried "php artisan optimize:clear" but it still doesn't work

class CreateContract extends CreateRecord
{

    public static bool $formActionsAreSticky = false;

class CreateContract extends CreateRecord
{

    public static bool $formActionsAreSticky = false;

also tried on "true" value

josef•16mo ago

No plugins right now. Maybe something else broke. Don't know if the demo always has the latest version. Anyways, that's not really a priority right now

toeknee•16mo ago

Something like this should work to prevent the redirect:

<div x-data="{ isFormFilled: false }" 
     x-init="window.addEventListener('beforeunload', function (e) {
        if (isFormFilled) {
            e.preventDefault();
            e.returnValue = '';
        }
     });"
>
    <form wire:submit.prevent="submit" x-on:input="isFormFilled = true">
        <!-- Your form fields here -->
        <input type="text" wire:model="name">
        <button type="submit">Submit</button>
    </form>
</div>

<div x-data="{ isFormFilled: false }" 
     x-init="window.addEventListener('beforeunload', function (e) {
        if (isFormFilled) {
            e.preventDefault();
            e.returnValue = '';
        }
     });"
>
    <form wire:submit.prevent="submit" x-on:input="isFormFilled = true">
        <!-- Your form fields here -->
        <input type="text" wire:model="name">
        <button type="submit">Submit</button>
    </form>
</div>

And integrate it natively with Forms ?

awcodes•16mo ago

Running 3.0.16 on my local version of the demo.

gon.exe•16mo ago

does not work for me: resources\views\livewire\create-purchase-order-using-purchase-requisition.blade.php

<div>
    <div x-data="{ isFormFilled: false }" 
        x-init="window.addEventListener('beforeunload', function (e) {
        if (isFormFilled) {
            e.preventDefault();
            e.returnValue = '';
        }
        });"
    >

    <form wire:submit.prevent="submit" x-on:input="isFormFilled = true">

        {{ $this->form }}

        <br>

        <div class="filament-page-actions flex flex-wrap items-center gap-4 justify-start filament-form-actions sticky bottom-0">

            <x-filament::button type="submit">
                @php
                    echo __('Create')
                @endphp
            </x-filament::button>

            <a
                class="filament-button filament-button-size-md inline-flex items-center justify-center py-1 gap-1 font-medium rounded-lg border transition-colors outline-none focus:ring-offset-2 focus:ring-2 focus:ring-inset dark:focus:ring-offset-0 min-h-[2.25rem] px-4 text-sm text-gray-800 bg-white border-gray-300 hover:bg-gray-50 focus:ring-primary-600 focus:text-primary-600 focus:bg-primary-50 focus:border-primary-600 dark:bg-gray-800 dark:hover:bg-gray-700 dark:border-gray-600 dark:hover:border-gray-500 dark:text-gray-200 dark:focus:text-primary-400 dark:focus:border-primary-400 dark:focus:bg-gray-800 filament-page-button-action"
                href="http://127.0.0.1:8000/admin/contratos"
                dusk="filament.admin.action.cancel
            ">
        
                <span class="">
                    @php
                        echo __('Cancel')
                    @endphp
                </span>
        
            </a>

        </div>

    </form>

</div>

<div>
    <div x-data="{ isFormFilled: false }" 
        x-init="window.addEventListener('beforeunload', function (e) {
        if (isFormFilled) {
            e.preventDefault();
            e.returnValue = '';
        }
        });"
    >

    <form wire:submit.prevent="submit" x-on:input="isFormFilled = true">

        {{ $this->form }}

        <br>

        <div class="filament-page-actions flex flex-wrap items-center gap-4 justify-start filament-form-actions sticky bottom-0">

            <x-filament::button type="submit">
                @php
                    echo __('Create')
                @endphp
            </x-filament::button>

            <a
                class="filament-button filament-button-size-md inline-flex items-center justify-center py-1 gap-1 font-medium rounded-lg border transition-colors outline-none focus:ring-offset-2 focus:ring-2 focus:ring-inset dark:focus:ring-offset-0 min-h-[2.25rem] px-4 text-sm text-gray-800 bg-white border-gray-300 hover:bg-gray-50 focus:ring-primary-600 focus:text-primary-600 focus:bg-primary-50 focus:border-primary-600 dark:bg-gray-800 dark:hover:bg-gray-700 dark:border-gray-600 dark:hover:border-gray-500 dark:text-gray-200 dark:focus:text-primary-400 dark:focus:border-primary-400 dark:focus:bg-gray-800 filament-page-button-action"
                href="http://127.0.0.1:8000/admin/contratos"
                dusk="filament.admin.action.cancel
            ">
        
                <span class="">
                    @php
                        echo __('Cancel')
                    @endphp
                </span>
        
            </a>

        </div>

    </form>

</div>

What is the command to see that information?

toeknee•16mo ago

No it wouldn't because you have doubled up the form. php artisan about

gon.exe•16mo ago

thanks

gon.exe•16mo ago

Do you mean the declaration of <form> and {{ $this->form }} ?

Dennis Koch•16mo ago

Do forms have input events at all?

JordyOP•15mo ago

Anyone has made any progress/ideas on this? Otherwise I will give up and mark it as too much effort to implement haha Im fine if it means writing something custom with alpine I just have no clue where I would put the code with beforeunload

Saade•14mo ago

hey Josef, did you find a solution for this? can't get it to work i think something got broken between versions, its not working on the demo anymore hmm actually the check to wether it should stick or not, is a bit wrong, only works on small height screens (can be simulated by opening the devtools on the bottom of the page) gonna PR a fix for it

EdmerKun•13mo ago

Does anyone found a solution for this? like a warning for the user before they leave?

Saade•13mo ago

@Dennis is working on something i guess (please dont go bother he asking when it will be released)

JordyOP•13mo ago

awesome, cant wait

Solution

EdmerKun•12mo ago

something relevant https://github.com/filamentphp/filament/issues/9992

GitHub

Wait, don't leave! · Issue #9992 · filamentphp/filament

Alert the user if they have unsaved changes in a form.

DrByte•12mo ago

Dude. You just copy/pasted someone else's response in another thread ... and pretended it's your own! Please get off this Discord server. Stop spamming in every thread.

Dennis Koch•12mo ago

Banned him.

JordyOP•12mo ago

☠️ legendary but yes, I think this thread is solved and I will follow the development of this issue

Gaming

Programming

Show a warning before leaving page when you have filled in a form (save/discard changes)