JavaScript: Confirmation / Warning before Leaving or Navigating Away from a Page

by Yang Yang on April 27, 2010

Things couldn’t be worse when you were half way editing something and accidentally navigated away from the editing page after a whole hour of typing work. Hitting the back button of your browser neither helped, all you had done was gone anyway.

This must be remedied in some way, if you are creating an application that needs the user to input stuff, especially lengthy articles. One approach is to automate draft saving every a few minutes, the other is to warn the user before he or she either intentionally or inadvertently navigate away from the editor page. You can achieve this by a straightforward snippet of JavaScript:

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

The warning variable can be timely altered according to the editing activities by the user. For instance, it is set true if the editing field is changed or does not equal to default value, or if the user triggers the onKeyUp / onChange event of any input fields:

var editor_form = document.getElementById("form_id");
for (var i = 0; i < editor_form.length; i++) {
	editor_form[i].onchange = function() {
		warning = true;
	}
}

This snippet must be put at the end of the page. Also, to avoid the warning when you press the form submit button, add this snippet after that:

document.getElementById("submit_button_id").onclick = function() {
    warning = false;
}
Anthony July 29, 2010 at 1:15 am

Nice post. I’d really love to use this method but I’m having trouble implementing it correctly. It seems when I try to add javascript at the end of the page, my header javascript function breaks down. Here is my code, please help if you get a moment. Thanks!


var warning = false;
window.onbeforeunload = function() {
if (warning) {
return ‘You have unsaved changes.’;
}
}


function updateTextBox(val)
{
if(val == “1”)
{
document.forms[’emailSelect’].elements[‘Recipient’].value = “1@xyz.com”;
}
else if(val == “2”)
{
document.forms[’emailSelect’].elements[‘Recipient’].value = “2@xyz.com”;
}
else if(val == “3”)
{
document.forms[’emailSelect’].elements[‘Recipient’].value = “3@xyz.com”;
}
else if(val == “4”)
{
document.forms[’emailSelect’].elements[‘Recipient’].value = “4@xyz.com”;
}
else if(val == “5”)
{
document.forms[’emailSelect’].elements[‘Recipient’].value = “5@xyz.com”;
}
else
{
document.forms[’emailSelect’].elements[‘Recipient’].value = “Select from the menu above.”;
}
}


I have a question or comment regarding:

Choose one of the following…
completed orders
pending orders
invoices or payments
user accounts or technical issues
general inquiries

<!–
var editor_form = document.getElementById("emailSelectID");
for (var i = 0; i

Anthony July 29, 2010 at 1:17 am

Oh crap, I’m sorry it looks like the comment system deleted all my tags… do you have another way I can post it?

Adrian September 3, 2012 at 6:08 pm

Just paste your code on pastebin.com and leave the link to snippet within a comment

Pradeep August 27, 2010 at 2:10 am

It shows different behaviors in IE and mozilla.
I want to run some javascript function just as the user clicks the browser close button or alt+F4 etc.

Comments on this entry are closed.

{ 2 trackbacks }

Previous post:

Next post: