Highlight updated fields

Hey,
I have a form pre-filled with values from db.
image
User can modify these values and then save.

I’d like to make it instatny visible which values have been modified (before saving) so it’s obvious it needs to be saved…
Highlighting the field would probably be enough for this but what would be the best approach for this?

I’ve not tried this but am just thinking out loud. How about creating a class so it is visually what you want and using the class toggle app connect with a condition of input.value != database.value?

2 Likes

I was going to suggest using variables to do this, but I think your solution is much better and works very well.

The only issue I had was creating the condition visually - clicking ‘select’ closed the data bindings panel without adding the code. I had to add it manually. Perhaps it was because the form was in a modal.

1 Like

I use the same method of detection as @sitestreet suggests, but I use it to make the actual [Save] button visible or invisible… and I make the save button really big and bright and the other buttons much more subtle.

Yes, I add all this kind of code manually as it may contain more complex conditions and the data bindings window is not really designed very well to do complex conditions at the moment.

1 Like

I do similar things - eg for file upload buttons - but usually show the button disabled. However I haven’t indicated the specific fields which have been modified before, and this certainly seem to be a good solution for this.

The conditions in this case are very simple - just input.value != database.value as @sitestreet suggested. The data bindings panel should normally cope with this without any trouble. It shouldn’t just disappear without adding the code in any case (though, like you, I have seen this before).

1 Like

@TomD @Antony @sitestreet Thanks a lot for your suggestions guys, your solution works great but what about a checkbox? The value from the database is either 1 or 0 but the checkbox only has a static value of 1

1 Like

Yes, very frustrating that… you have to put $_POST.fieldname.default(0) when you assign it to a value in the database…

Or use input_id.checked or input_id.checked==false when working as you are on the app/client side!

Hi Antony, not sure which part is “frustrating” here :slight_smile: That’s how the HTML works: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox

The values of the checkboxes, which are not checked are not submitted. That’s why there is the default formatter available - we don’t know what you like to add there - a null, an empty string or something totally different.

1 Like

I keep forgetting about the default formatter but yes, that’s exactly what it’s for and works very well.

Having to remember to add the .default!

4 Likes