3

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.

Jonathan Wood
  • 65,341
  • 71
  • 269
  • 466
  • When are you executing `$('input').change(function...`? Is it in a `$(document).ready` or similar handler? – Digital Plane Jul 26 '11 at 04:12
  • I just have it in a ` – Jonathan Wood Jul 26 '11 at 04: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 Jul 26 '11 at 05:06

1 Answers1

7

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?" };
  });
});
Digital Plane
  • 37,354
  • 7
  • 57
  • 59