I have been asked to modify a form to ensure that fields have been completed. The problem is the user is still able to click on the 'leave page' button. This actually redirects to the existing page when the add new button is pressed so the user can still get away with entering blank entries. Can anyone tell me how I can get around this please? Here is my form:
</style>
</head>
<SCRIPT LANGUAGE="Javascript1.2" TYPE="text/javascript">
<!--
isSaved = false;
function unloadMess(){
mess = "Please make sure that you have saved all changes before leaving the page."
if(!isSaved) return mess;
}
function allSaved(){
var x=document.forms["input_style"].addcfrcode;
if (x==null || x==""){
alert("Code must be selected");
return false;
} else {
isSaved = true;
}
}
//-->
</SCRIPT>
<body onbeforeunload="return unloadMess()" >
<form method=post enctype="multipart/form-data" id="input_style" name="input_style">
<div><input id="save_btn" type=submit name=update onclick="allSaved()" value="Save Changes"></div>
<p align="right"><b>Budget Company X</b></p>
<div style="width:100%; height:500px">
<table cellSpacing=1 cellPadding=5 width="100%" border=1>
<tr>
<td class=info align=left colspan=11><bExpenditure</b></td>
</tr>
<tr>
<td class=info align=left><b>Code</b></td>
<td class=info align=left><b>Cost</b></td>
<td class=info align=left></td>
<td class=info align=left><b>Description</b></td>
<td class=info align=left></td>
<td class=info align=left><b>Actual<br />Aug-2012/Aug-2012</b></td>
<td class=info><b>Budget<br />Sep-2012/Aug-2013</b></td>
<td class=info><b>Budget<br />Sep-2013/Aug-2014</b></td>
<td class=info><b>Budget<br />Sep-2014/Aug-2015</b></td>
<td class=info align=left><b>Comment</b></td>
</tr>
<tr>
<td class=back align=left>
<select name=addcfrcode>
<option value="" selected></option>
<option value="1">Code 1</option>
<option value="2">Code 2</option>
<option value="3">Code 3</option>
</select>
</td>
<td class=back align=left>
<select name=addchartgroup>
<option value="" selected></option>
<option value="26">Cost A</option>
<option value="27">Cost B</option>
<option value="28">Cost C</option>
</select>
</td>
<td class=info align=left></td>
<td class=back align=left>
<input type=text name=add_desc size=20>
</td>
<td class=info align=left></td>
<td class=back style="text-align: right;">
<input type=text size=10 name="addbudget1" value="">
</td>
<td class="back yearone">
<input class="yearone" type=text size=10 name="addbudget2" value="">
</td>
<td class="back yeartwo">
<input class="yeartwo" type=text size=10 name="addbudget3" value="">
</td>
<td class="back yearthree">
<input class="yearthree" type=text size=10 name="addbudget4" value="">
</td>
<td class=back align=left>
<textarea class="comment" type=text name=comment size=20 value=></textarea>
</td>
<input type=hidden name=addbudgetid value=>
</tr>
<tr>
<td class=back colspan=12>
<input type=submit name=insert onclick="allSaved()" value="Add New">
</td>
</tr>
</table>
