Jump to content

Help With Onbeforeunload()


shaunie

Recommended Posts

Hi,

 

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>

Link to comment
Share on other sites

If you want to prevent someone from submitting a form before it has been completed, you need to use an onsubmit handler for the <form> element, not onbeforeunload.  Your onsubmit should validate all the fields to make sure they have been filled in.

 

Link to comment
Share on other sites

Hi,

 

Thanks for your reply, my problem is that the form has 2 buttons, one to add a new row and one to save the changes. The save changes button is necessary to ensure that the other parts of the form have been saved . I would like to be able to add a new row without calling the onbeforeunload() function and instead using the onsubmit() function to validate, however I believe onbeforeunload() should be used in all other cases. Is this possible?

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.