How to manager dirty forms

Wappler General How To
#1

I would like to manage the “dirty” state of a form - ie if any data has changed since it was last saved, or the form opened. I tried to use a variable in the form, and then use a dynamic event when the input changed to set this to true, and then use this to change the disabled state of a button, but this doesn’t seem to work (the button stays enabled).

Ultimately, I would like to also stop someone closing a modal while the form is dirty - or at least pop up an “are you sure” box.

Can someone suggest how this could be achieved.

Thanks.

Confirm if user wants to leave page
#2

I would change the modal setup “to no click on close”, then use the success call back of the form to close the modal once the data has been received. Also include a cancel button with a modal dismiss. That way the modal can’t be closed unless the data is submitted or the form in canceled.

#3

Thanks.

Yes, this is also what I’ve done, and this stops users inadvertently closing it.

However the big problem I’m trying to solve is to manage the dirty state of the form which I’ve not managed to work out as yet. The handling of the “Are you sure” button is not so hard as I have that on other modals for delete etc, but it’s the management of dirty state I’ve not sorted…

#4

On further inspection, it looks like my method to establish if the form is dirty is working - what doesn’t seem to work is the button view changing. It seems that the button does enable once the form is dirty, and if I click on it, it works (ie the Click event is called) however to state of the button visually remains disabled at all times.

#5

The base idea is that once your form is populated with the old values, write some jQuery, as its already included, something to the effect of :
$(“input”).change(function(){
alert(“The text has been changed.”);
});
Of course it would require a little more work than that, but it gives you the basic idea.

#6

What I’m currently doing is to update a variable every time the “change” Dynamic Event is triggered. This updates my dirty flag to true, and I can then use this to trigger the “are you sure”.

As above, this is actually working - I thought it wasn’t as I also use this flag to disable the save button to provide a visual indicator to the user so they know if something has changed. For this I use the Disabled dynamic state on the button - this does actually seem to work, in that the form gets saved when it’s dirty, and nothing happens when it’s not dirty, however, the button was visually disabled at all times. I’ve now worked out why this is - if I also set the button to disabled in the button properties, then it remains disabled at all times - independant of the Dynamic state.

The last remaining issue I had was with the Summernote editor - neither the Value Changed, or Change events seem to work here, and the Input event seems to be the one to hook in to.

#7

I’m looking to do the exact same thing described here. Have you successfully worked out the kinks?

I was hoping not to have to use jQuery, because I’m using BS5 and it doesn’t use it any more. Is there a way to do it in plain JS or does App Connect have something built in? That would be the best option.