I'm creating an ASP.NET website and I want to implement logic to warn the user when they are navigating away from a page they've edited.

I found quite a bit of info on the web, although most of it seems quite outdated. Note that I still have a lot to learn about jQuery.

The following code displays the message as expected.

window.onbeforeunload = function () {
    return 'You have unsaved changes!';
}

However, the following code--which is supposed to be equal to the code above only when a change is made--does not work. No warning is ever displayed.

$('input').change(function () {
    window.onbeforeunload = function () { return "Your changes have not been saved?" };
});

Can someone say why the second snippet doesn't work? Or perhaps you can point me to a reference that is more recent.

I'm creating an ASP.NET website and I want to implement logic to warn the user when they are navigating away from a page they've edited.

I found quite a bit of info on the web, although most of it seems quite outdated. Note that I still have a lot to learn about jQuery.

The following code displays the message as expected.

window.onbeforeunload = function () {
    return 'You have unsaved changes!';
}

However, the following code--which is supposed to be equal to the code above only when a change is made--does not work. No warning is ever displayed.

$('input').change(function () {
    window.onbeforeunload = function () { return "Your changes have not been saved?" };
});

Can someone say why the second snippet doesn't work? Or perhaps you can point me to a reference that is more recent.

• javascript
• jquery

• When are you executing $('input').change(function...? Is it in a $(document).ready or similar handler? – Digital Plane Commented Jul 26, 2011 at 4:12
• I just have it in a <script> block at the top of my page. This is the same place the first snippet is, which works. Like I said, I'm still learning jQuery, but doesn't the second snippet cause the function to run when any of the input elements fire a change event? – Jonathan Wood Commented Jul 26, 2011 at 4:14
• That will add/replace the listener every time a change event on an input fires, you should only add it once. An alternative is to use onbeforeunload to see if any form control's value is different to its defaultValue and warn if it is. – RobG Commented Jul 26, 2011 at 5:06

1 Answer 1

Your input elements probably do not exist when the code is executed. Try using the .live function to detect changes on all input elements, or wrap your code in a $(document).ready() handler.

Example:

$('input').live("change", function () {
    window.onbeforeunload = function () { return "Your changes have not been saved?" };
});

or

$(document).ready(function () {
   $('input').change(function () {
      window.onbeforeunload = function () { return "Your changes have not been saved?" };
  });
});