Using jQuery To Leverage The OnChange Method Of Inputs
Posted November 18, 2008 at 8:24 AM
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.
Launch code in new window » Download code as text file »
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html>
- <head>
- <title>jQuery Leveraged OnChange Method</title>
-
- <style type="text/css">
-
- input.dirty {
- background-color: #660000 ;
- color: #FFFFFF ;
- }
-
- </style>
-
- <script type="text/javascript" src="jquery-1.2.6.min.js"></script>
- <script type="text/javascript">
-
- // When DOM loads, init the page.
- $( InitPage );
-
- // Init the page.
- function InitPage(){
- var jInput = $( ":input" );
-
- // Bind the onchange event of the inputs to flag
- // the inputs as being "dirty".
- jInput.change(
- function( objEvent ){
- // Add dirtry flag to the input in
- // question (whose value has changed).
- $( this ).addClass( "dirty" );
- }
- );
- }
-
- </script>
- </head>
- <body>
-
- <h1>
- jQuery Leverages OnChange Method
- </h1>
-
- <form>
-
- <p>
- Data Item 1:
- <input type="text" id="d1" value="" />
- </p>
-
- <p>
- Data Item 2:
- <input type="text" id="d2" value="" />
- </p>
-
- <p>
- Data Item 3:
- <input type="text" id="d3" value="" />
- </p>
-
- </form>
-
- </body>
- </html>
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:
| | | | | |
| |  | | ||
| | | |
Download Code Snippet ZIP File
Post Comment | Ask Ben | Permalink | Other Searches | Print Page
Newer Post
Comprehensive ColdFusion Component OnMissingMethod() Testing
Older Post
Duckman Is My Sherpa
Reader Comments
Thank you for a really nice post!
Your idea sounds great, but I wonder how do you intend to treat the case when data was changed and then changed back to it's original value (without submission).
It will stay "dirty" in this case...
@Vvvlad,
It's interesting, I actually thought of that use case. But then, I realized that that is an artificial concern. When we look at a text field and change the value, it becomes dirty - period. If someone then goes back and changes it again, pre-save, back to the original value, I think that it is a false construct that we should now consider that field to be no longer dirty. I know that might sound odd, but it's just something I feel.
Thanks for the post, its a simple example but can be adapted to other more complex items. Much appreciated.
Hi Ben,
Thanks for the input dirty, How can i expand the same to textarea.
@Ravi,
This should work just the same for textareas as it does for inputs.
Great script, but does it work with select and checkboxes?
