Question

I’m looking for an function that shows a alertbox when the visitor is trying to leave the page when he or she haven’t finished the form. I have imported an image to show what I mean. Translation: title = “Confirm navigation”, content = “Do you want to leave this page?”, button1 = “Leave this page”, button2 = “Stay on this page”.

Facebook uses this alertbox when you want to go back one page when you have for example not finished an PM to someone.

How can I accomplish something like this?

Thanks in advance.

Answer 1

Use window.onbeforeunload in conjunction with a flag that gets set when a change is made to a form field.

For example:

var changed_flag = 0; // change in an onchange event or whatever, something like the below

document.getElementById('form_field').onchange = function() {
  changed_flag = 1;
};

window.onbeforeunload = function() {
  if ( changed_flag ) {
    return 'You have unsubmitted changes.'
  }
};