The other day, I was working on an in-line-editing style datagrid and in order to minimize the datagrid's AJAX calls (required for saving), I wanted to only save records that have been altered in some way. At first, I started down the path of storing original values with the intent to compare them to input values on "blur" or on "focus" as needed. This got really complicated really fast.
Then, it dawned on me - text inputs, like select boxes, have an onChange method that fires when the text value of a given input changes. I think that I've completely forgotten about this method. In fact, I'm not sure if I've even ever used this method before in an application (outside of the select box).
Anyway, I was so excited at how easy this made flagging rows as dirty in my datagrid, I wanted to share it in case others had completely forgotten that it existed.
In this example, we are adding a "dirty" class to any input that get's changed. This class doesn't, in and of itself, do anything; but, it's not too difficult to imagine leveraging this dirty class (or other hidden flags) to alter the behavior of a page.
When I add some text to the inputs in the above example, my page looks like this:
Want to use code from this post? Check out the license.