Question

I have a site which uses a lot of JavaScript (mainly jQuery) and I need a nice global way to let the user know that they will lose unsaved changes when they navigate away from a particular page.

At the moment I have an onchange event placed on the inputs and wrap my main navigation in a function which will display the warning when clicked.

This feels really clunky and doesn’t scale well (navigation which is not part of the main navigation needs to be manually wrapped, which is far from ideal)

Answer 1

I have an onchange event on my inputs and set an isDirty variable to true when they change.

Then I use onbeforeunload event to warn the user about unsaved changes:

var isDirty = false;

window.onbeforeunload = function (evt) {
    if (isDirty) {
        return 'If you continue your changes will not be saved.';
    }
}