How to display onbeforeunload dialog when appropriate?

Question

I've got an editor in javascript on my webpage and I would like to ask user if he/she wants to leave the page even if there are unsaved changes.

I know I can add custom message to the "onbeforeunload dialog" this way:

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

(Source) but I want to display the dialog only where there really are some unsaved changes. How to do that?

Thanks!

gnarf · Accepted Answer · 2010-04-18 20:07:19Z

9

You can do something like this:

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

function makeSomeChange() {
  // do some changes....
  unsavedChanges = true;
}

You can make sure to change unsavedChanges in the 'change' event handlers.

answered Apr 18, 2010 at 20:07

gnarf

107k26 gold badges129 silver badges161 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MartyIX Over a year ago

It works! I was returning empty string instead of returning null or undefined as you wrote. Thank you!

Collectives™ on Stack Overflow

How to display onbeforeunload dialog when appropriate?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest