In order to achieve this, make sure your users have Javascript enabled. We will be using window.onbeforeunload.
Firstly, open up your HTML in your favorite text editor, such as Notepad or Dreamweaver. You will see something like:
CODE
<html>
....
<head>
....
</head>
<body>
...
</body>
</html>
....
<head>
....
</head>
<body>
...
</body>
</html>
Next, paste the following into the script, between the head tags:
CODE
<script language="javascript" type="text/javascript">
window.onbeforeunload = askConfirm;
function askConfirm(){
return "You have unsaved changes.";
}
</script>
window.onbeforeunload = askConfirm;
function askConfirm(){
return "You have unsaved changes.";
}
</script>
so that we get this:
CODE
<html>
<head>
<script language="javascript" type="text/javascript">
window.onbeforeunload = askConfirm;
function askConfirm(){
return "You have unsaved changes.";
}
</script>
</head>
<body>
</body>
</html>
Save the script and test it in your browser. Try navigating away from the page. A popup pane will appear, asking you to confirm your exit and showing the message: "You have unsaved changes.";
Of course, we would like to achieve more than that, such as asking only when the user has made changes to the form.
We will need to do this:
CODE
<script language="javascript" type="text/javascript">
needToConfirm = false;
window.onbeforeunload = askConfirm;
function askConfirm(){
if (needToConfirm){
return "You have unsaved changes.";
}
}
</script>
needToConfirm = false;
window.onbeforeunload = askConfirm;
function askConfirm(){
if (needToConfirm){
return "You have unsaved changes.";
}
}
</script>
We first set a boolean "needToConfirm" to false, so that we don't ask unless the user has done something, and this something will change needToConfirm to true. Before unload, the function askConfirm will be called. If the boolean "needToConfirm" is true, the function will return a string and there will be a pop-up window. Else, it will return null and the pop-up won't show. Now we need to add something to set needToConfirm to true.
CODE
<form>
<input type="text" onchange="needToConfirm=true"/>
<input type="submit" value="Submit"/>
</form>
<input type="text" onchange="needToConfirm=true"/>
<input type="submit" value="Submit"/>
</form>
The input field, when changed, will set needToConfirm to true. If unchanged, the boolean will be false. However, we do want to note that when the user has changed and SUBMITTED the form, we do not show the pop-up. So we add the following:
CODE
<form onsubmit="needToConfirm=false;">
<input type="text" onchange="needToConfirm=true"/>
<input type="submit" value="Submit" onclick="needToConfirm=false;" />
</form>
<input type="text" onchange="needToConfirm=true"/>
<input type="submit" value="Submit" onclick="needToConfirm=false;" />
</form>
And we result in the final code:
CODE
<!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=iso-8859-1" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript">
needToConfirm = false;
window.onbeforeunload = askConfirm;
function askConfirm(){
if (needToConfirm){
return "You have unsaved changes.";
}
}
</script>
</head>
<body>
<form onsubmit="needToConfirm=false;">
<input type="text" onchange="needToConfirm=true"/>
<input type="submit" value="Submit" onclick="needToConfirm=false;" />
</form>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript">
needToConfirm = false;
window.onbeforeunload = askConfirm;
function askConfirm(){
if (needToConfirm){
return "You have unsaved changes.";
}
}
</script>
</head>
<body>
<form onsubmit="needToConfirm=false;">
<input type="text" onchange="needToConfirm=true"/>
<input type="submit" value="Submit" onclick="needToConfirm=false;" />
</form>
</body>
</html>
There you go. You might want to save the javascript in an external file and link it, so that you don't have to enter the code on every page. Use the following:
CODE
<script language="javascript" type="text/javascript" src="[i]your file name[/i]>
