Link to home
Start Free TrialLog in
Avatar of erot
erot

asked on

How to detect form-field change when window-close

Have a form with several fields.

Is it possible to detect if any of the fields in the form changed content since it was first displayed.
If changes where made I want to display the client with a message i.e. like this "You have made changes, do you want to save the record?".... (YES) ... (NO)...

And that this check is only done when the user tries to close (and if possible) leave the window that holds the form.

Would prefere this to be done in JavaScript.
And that it works both in NS and IE.

Erot

ASKER CERTIFIED SOLUTION
Avatar of a.marsh
a.marsh

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of a.marsh
a.marsh

In terms of the user closing the browser, well you can use the same code above, but this is where you start hitting problems with cross-browser compatibility.

You could try using the onunload event in the <body> tag e.g.

<body onunload="return checkAltered():">

but then you'll probably now want the browser warning appearing etc.etc. (unless the window you are working in was opened by your page using window.open()) and there is little you can do about that. :o)

I personally always convince my clients (if they need this kind of functionality) that it is better stick with controlling what is in the page and not outside of it if they want their code to work properly in different browsers.

Hope this helps.

:o)

Ant
Sorry, that should say "not want" instead of "now want".

Ant
Avatar of Michel Plungjan
IE:
onBeforeUnload="if (altered) returnValue='Are you sure'"
I was going to mention that too Michel, but I've got a sneaky feeling there is going to be a strong emphasis on everything working the same in IE and NS....nightmare!!!

<offtopic>

How are you getting on with achieving the required 3000 points each month?

It's just that I remember you mentioning what a nightmare you thought it could be when they first set up the policy for having EEKPro for free.

:o)

</offtopic>

:o)

Ant
I have a hidden variable as my global variable defaulted to N, ao any changes on the form update it to Y and while exiting or closing the window check this hidden varible value if its "Y" implies somechanges are there to save, so alert a message as you want.
<html>
                     <head>
                     <script language="javascript">

                      function checkAltered(){
                      document.from1.alteredflag.value = 'Y';

                      return true;
                     }

                     function subform(){
               var flag =document.from1.alteredflag.value;
                           if(flag == 'Y'){
                             return confirm("You have altered the form. Are you sure you want to leave?");
                         }
               return true;
                     }

                     </script>
                     </head>
                     <body>
                     <form name = "form1">
                     <input type="text" value="" onChange="checkAltered();"><br>
                     <input type="text" value="" onChange="checkAltered();"><br>
                     <input type="submit"  onClick="return subform()">
                     <input type="hidden" value="N" Name="alteredflag">
                     </form>
                     </body>
                     </html>
I have a hidden variable as my global variable defaulted to N, ao any changes on the form update it to Y and while exiting or closing the window check this hidden varible value if its "Y" implies somechanges are there to save, so alert a message as you want.
<html>
                     <head>
                     <script language="javascript">

                      function checkAltered(){
                      document.from1.alteredflag.value = 'Y';

                      return true;
                     }

                     function subform(){
               var flag =document.from1.alteredflag.value;
                           if(flag == 'Y'){
                             return confirm("You have altered the form. Are you sure you want to leave?");
                         }
               return true;
                     }

                     </script>
                     </head>
                     <body>
                     <form name = "form1">
                     <input type="text" value="" onChange="checkAltered();"><br>
                     <input type="text" value="" onChange="checkAltered();"><br>
                     <input type="submit"  onClick="return subform()">
                     <input type="hidden" value="N" Name="alteredflag">
                     </form>
                     </body>
                     </html>
erot, please reject the proposed answer.

I think you've missed some of the point there podishetty - when the form gets submitted it doesn't matter if things have been altered!!!

Ant
oh ...that is the same script he got done using to lock up some other q's ...he must of forgotten to delete the flag part out of it.
podishetty: You seem to have been member long enough to know that proposing an answer (and a wrong one at that - and even worse - reusing code given by an expert in a previous comment) is not on after comments have been given.

Michel
Ant: I actually do not conciously try to reach 3000 points - I just hope I will not loose status if I do not reach them - I have been off EE for a while and then back on and have not been hunting points for a long while
This question is LOCKED with a Proposed Answer.  If it helps you, great, accept it and grade it to close.  If not, reject it and comment as to why or what else is needed.

Few additional experts will join this collaboration effort, once a question has been locked.  Just want to confirm this to you.  If more than one expert helps you, you can always split points or award additional help in a new question, within the same topic area.  If you need help from us, post a zero point question here, and include the link:

https://www.experts-exchange.com/jsp/qList.jsp?ta=commspt

Moondancer
Community Support Moderator @ Experts Exchange

P.S.  Double click your Member Profile, expand VIEW HISTORY to navigate and update all your open questions please.
Moondancer: I think a single click on the member name would suffuce ;-)

Michel
Points for mplugjan - qid=20266971
Finalized today due to a total lack of response by asker.

Thanks, Michel, modifed the script.

Moondancer
Community Support Moderator @ Experts Exchange

Guys:

I am implementing an event in which it will show a popup window that contain several questions to answer. This event will only display after i close the browser. But i have a problem. When i refresh tha page it will show the popup window and if i press a link on the page again it will show the popup window. It should only display the popup window if i close the page. How can i implement this in javascript..

Thanks
Francis
1. Not really possible (detecting the page closing can be done with an ugly hack that measures the window size - I do not know if it still works)

2. Please ask the question in the forum for maximum support.

Michel
Hi guys i got the the answer for my question. This code will open a popup window if you're going to close the (X) button of the window. here is the code. thanks for the adviced.


<html>
<head>
<title>splash page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function RorC(theURL,winName,features){
  var top=self.screenTop;
   if(top>9000){
   window.open(theURL,winName,features);
   }
}
function MM_openBrWindow(theURL,winName,features) { //v2.0
if(document.all){
RorC(theURL,winName,features);
}else{
var top=window.outerWidth;
if(top==0){
window.open(theURL,winName,features);
}}
}
//-->

</SCRIPT>
</head>
<body onUnload="MM_openBrWindow('exitpage.php','exitpage','width=300,height=400')">
<div align="center"><font size="2" face="Verdana, Arial, Helvetica, sans-serif"><strong>Try
  to refresh the window will not popup . try to click the link still the window
  will not popup. it will only popip if you close the browser. Without this script,
  all events in this page will trigger the window to popup.</strong></font> </div>
<FORM NAME="myForm">
  <div align="center">
    <INPUT TYPE="hidden" VALUE="" NAME="check">
    <a href="http://www33.brinsker.com/softcomputing">Link to my page</a> </div>
</form>
</body>
</html>
Yep "with an ugly hack that measures the window size "