JavaScript

Checking on client side if form has been modified

Simon Reynolds

Simon Reynolds

— 1 min read

I'm editing a record in a web application and I accidentally click on something I shouldn't have. The page navigates away and when I hit back I see that all my changes have been lost.

This still happens with an almost disturbing level of regularity, I came across it recently myself and was tasked with fixing this issue. Rather than reinvent the wheel myself some googling turned up a wonderful jQuery plugin named dirtyFields.

Simply add

var $form = $(formSelector);
$form.dirtyFields();

to a page load function and it will automatically bind to the form and keep track of changes to the form.

To get an array of changed fields in the form simply call

$.fn.dirtyFields.getDirtyFieldNames($form)

To quickly check for edits to a form if the user navigates away from the page simply hook on to the window.onbeforeunload event

window.onbeforeunload = function(){
var changes = $.fn.dirtyFields.getDirtyFieldNames($form);
    if (changes.length > 0) {
    return "You have unsaved changes."
    } else {
    // There are no changes made so navigate away safely
        return null;
    }
};

Read more