How to show or enable Save button when any form item changes

[palanzo]

This seems pretty basic - but I could not find an elegant solution.
If I have a form with N fields for input, and I have a Save button to Save any changes - how can I have the Save button color and state change - ONLY when an item in the form has been modified? So it’s clear to the user the changes are not saved yet?

[Scott]

In a condition in any element, compare the n fields against the inputs. If any one doesn’t match, set a flag on that element. Have the save button monitor the value of the flag.

[palanzo]

Nice… so do a multiple compare in a single condition on any element I pick - then use the flag on the button - thanks! I think…

But more detail please? How do I compare the input fields against the inputs… aren’t they the same thing?

So I have an Input Field “Name” - it get’s loaded from the repeating group item - and holds either the current value - OR can be blank.

So this doesn’t seem to work… below I set a conditional on the Save button to test this and say when the “Input Nickname’s value is not Current Page Horse’s Nickname” bold the button text… (The initial value of the input is set to Current Page Horse’s nickname"… not sure what is happening.

NOTE I just did set the Condition to ON — but it still doesn’t work.
I’m expecting that as I type in the input to change the existing test it will bold - or worst case when I tab away

[romanmg]

You DO want it to bold when it meets this condition? Check the bold box. Right now it’s unchecked. Unless I’m not understanding…

[palanzo]

Ugh… took the screen shot at the wrong time… yes, it’s checked and the turned ON.
I’m not really as dense as I seem — just tired as hell last night…

So it works now only when the field I’m editing changes focus - I have to tab away.

Anyway to get the condition to be evaluated as a user is typing?

I’d like to hide or disable the “Save” button until a change is detected.

So if the current “name” is “Charlie” and the user selects the input field and changes “Charlie” to “Charles” I’d like to SHOW the Save button right then…a visual indicator that new information must be saved?

ALSO - it will be tedious on forms with a lot of input to set the multiple conditional “Or” logic… isn’t there a simpler way to say if any element of a form changes from it’s starting value then do “X”? I’m thinking I’m missing something simple here…

c

[romanmg]

Hi Charlie,

Unfortunately, a change in an input’s value will only be detected once you’ve clicked out of it after making the change. This may be a lateral solution, but you could also create workflows for each input:

When input’s value is changed > show Save button. Which might be easier to manage than a whole bunch of conditions, however these would now increase your workflow count.

You could also use autobinding! Which automatically saves the value when changed. You’ll have to create permission roles to get it set up, but you have the option to display an alert so that the user is aware they made a change. The downside to this feature is that it will save no matter what, so if the user makes a mistake and wants to revert, but doesn’t remember what it was before… then they’re out of luck. But something to consider.

[palanzo]

Thanks … I figured doing it in the workflow for each input would work. Too bad there isn’t a standard way of doing this in Bubble – seems kind of basic. Each input could have a configuration option “Enable or Show” selected object on input change… I guess I can add that as a feature request somewhere.

Or it would make a nice plug-in.