Basic example of “onPropertyModifiedStateChange”
The following example shows how to get notified whenever a value of a form’s property changes with just a few lines of code. Some css can be used to highlight the modified data. The password content is readable just for demo purpose.
Basic example of “onFormModifiedStateChange”
The following example extends example 1 and additionally tracks the modified state of the whole form using the onFormModifiedStateChange()-Callback.
Example with reset buttons for properties
The following example shows a form with some more fields and introduces a reset button for every property that appears whenever the related property is in modified state. This especially is useful when dealing with big forms with a lot of fields for maintaining data.
As you can see you can add this functionality with just two rows of code within the onPropertyModifiedStateChange()-Callback and some additional lines of code to create the buttons dynamically and register their event handlers.
Creating the buttons dynamically allows you to extend a given HTML form only in case you are applying the uicForm3 plugin and leave the HTML of the form untouched if you are not applying the plugin. The example shows that you hardly have to deal with uicForm3, instead all you need is just some rows of fairly simple javascript / jQuery code, a good idea and some css skills.
To reset a property to its initial value we use two uicForm3 methods. One is for retrieving the initial value and one is to assign the initial value of a property to it’s current value. The property’s identifier is retrieved from the name’s attrivbute of the first form element within the property’s wrapper div.
As we are dealing with $.fn.uicForm3.defaults() when setting the options for uicForm3 and apply the buttons dynamically this code can be moved to a global javascript file and works for all forms in your project as long as the form’s HTML-DOM follows a common structure. I know that we are dealing with a rather simple HTML structure but as long as the structure follows some common rules it’s not a too big deal to dynamically insert some DOM-elements on certain positions.