<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#container{
overflow:hidden;
width:510px;
margin-left:auto;
margin-right:auto;
}
#btnsubmit{
float:right;
margin-right:5px;
margin-top:10px;
}
</style>
<script type="text/javascript">
function clearField() {
var ta = document.getElementById("ta");
var subject = document.getElementById("sub");
ta.value = "";
subject.value = "";
}
window.onbeforeunload = function(){
var ta = document.getElementById("ta");
var subject = document.getElementById("sub");
if(ta.value != "" || subject.value != ""){
return "You have unsaved work!";
}
}
</script>
<title>Detecting Unsaved Work</title>
</head>
<body>
<div id="container">
<form name="myform" action="#" method="post">
Subject:
<input type="text" name="subject" id="sub" style="width:500px;"></br></br>
<textarea name="body" id="ta" style="width:500px; height:300px; background-color:#FFF;"></textarea>
<input type="submit" name="submit" value="Submit" id="btnsubmit" onClick="clearField();">
</form>
</div>
</body>
</html>
