Question

If a user is on a page with a form, and they have edited something, and then try and navigate to another page, how can I notify them?

How do people do this?

Is it a matter of computing a hash of all the input fields and comparing if they are exiting the page?

Is there a on page unload event?

Answer 1

I like to only prompt the user if they’ve actually changed something. Something like this:

var changesMade = false;

function onDataChanged() {
    changesMade = true;
}

$('input:text, textarea, select').change(onDataChanged);
$('input:checkbox, input:radio').click(onDataChanged);

$(window).bind('beforeunload', function() {
    if (changesMade) {
        return 'Changes have been made. Are you sure you want to leave the page?';
    } else {
        return null;
    }
});