.NET Tips and Tricks

Blog archive

Flagging a Page as Dirty with jQuery

In the bad old days of desktop applications, every form object in the world had a Dirty property that let you easily check to see if the user had made any changes to the data on the form. It's almost as easy with client-side code running in the Web browser, provided you use jQuery. This line finds every input tag and ties the tag's change event to a JavaScript function called flagChanges:

$("input").change(function () 
            {
              flagChanges();
            });

That will catch your textboxes, checkboxes, and any other input item defined with an input element. If you also want to catch changes in other elements, you can selectively add additional jQuery statements. This statement will catch changes made from dropdown lists (defined with select elements):

$("select").change(function () 
            {
              flagChanges();
            });

You can do what you want in your flagChanges function, but here's a version that shoves some bolded text inside another element with an id of ChangeTextDiv (based on the name, probably a div element):

function flagChanges() 
{
  $("#ChangeLabelDiv").html("<b>unsaved changes in page</b>");
}

You'll need to remember to clear that element whenever you let the user save their changes. That's what this line of jQuery does:

$("#ChangeLabelDiv").html("<br/>");

Posted by Peter Vogel on 07/07/2015


comments powered by Disqus

Featured

Subscribe on YouTube