Prompt User before browser close?
We have an administrative portal that our teachers constantly forget to download their latest PDF instructions before logging out and/or closing the browser window. I have looked around but can't find what I'm looking for.
I want to accomplish the following goals:
Goal 1
Before a user can close the browser window, they are prompted "Did you remember to download your form?" with two options, yes/no. If yes, close, if no, return to page.
Goal 2
Before a user can click the 'logout' button, they are prompted with the same as above.
My first pass at the very basic code (which does not work for browser close) is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function init() {
if (window.addEventListener) {
window.addEventListener("beforeunload", unloadMess, false);
} else if (window.onbeforeunload) {
window.onbeforeunload = unloadMess;
};
}
function unloadMess() {
var User_Message = "[Your user message here]"
return User_Message;
}
</script>
</head>
<body onload="init();">
hello this is my site
</body>
</html>
EDIT - NEW ISSUES
The solution provided below works but also has its own issues:
When user clicks the link to actually download the forms, the page thinks they are trying to leave and in turn present an error message to them! Also - I would like for one event or another to occur but not necessarily both. I.e. they hit 'logout' button and they are presented with the OnClick event, THEN the browser prompt. Any ideas?
Answer
Update 2017
All modern browsers do not support custom messages any longer.
window.onbeforeunload = function(evt) {
return true;
}
This one for closing the tab:
window.onbeforeunload = function(evt) {
var message = 'Did you remember to download your form?';
if (typeof evt == 'undefined') {
evt = window.event;
}
if (evt) {
evt.returnValue = message;
}
return message;
}
and use onClick event for logout button:
onClick="return confirm('Did you remember to download your form?');"