Question

I have a javascript message alert the user when he attempts to leave a form page in case he hasn’t finished filling out the form as follows:

window.onbeforeunload = function (evt) {
if(window.nounloadcheck == true) return;
var message = 'Data you entered may not be saved';
if (typeof evt == 'undefined') {
evt = window.event;
}
if (evt) {
evt.returnValue = message;
}
return message;
}

I also have a link on the same page that opens a colorbox modal so user can upload a new photo. Upon submission of new photo, the colorbox modal closes and refreshes the main page so the user can see the new photo they uploaded. This is the colorbox code for refreshing the main page:

jQuery(document).ready(function(){
jQuery(".iframe").colorbox({iframe:true, width:"748px", height:"92%", onClosed:function(){ location.reload(true); } });
});

The problem is when the page attempts to reload, the javascript alert comes up. I’ve tried:

 <form ... onSubmit='window.nounloadcheck = true; return true;'>

This words for the submit button for the form on the main page. But it doesn’t work for the submit button on the colorbox modal. How would I prevent the main page from showing javascript alert upon closing of the colorbox modal?

Answer 1

You are looking for:

<form ... onSubmit='window.onbeforeunload = null; return true;'>

This will clear out the event handler before it gets run.