Solved

How to detect form-field change when window-close

Posted on 2001-08-30
17
218 Views
Last Modified: 2008-02-01
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

0
Comment
Question by:erot
  • 5
  • 5
  • 2
  • +3
17 Comments
 
LVL 15

Accepted Solution

by:
a.marsh earned 150 total points
ID: 6440688
The way I always do this is to use a global flag and only check it if the user clicks on a link on the page e.g.

<html>
<head>
<script language="javascript">

altered = false;

function checkAltered(){
  if(altered){
    return confirm("You have altered the form. Are you sure you want to leave?");
  }

  return true;
}

</script>
</head>
<body>
<p>
<a href="page1.html" onClick="return checkAltered();">page 1</a>
<a href="page2.html" onClick="return checkAltered();">page 2</a>
<a href="page3.html" onClick="return checkAltered();">page 3</a>
</p>
<hr>
<form>
<input type="text" value="" onChange="altered = true;"><br>
<input type="text" value="" onChange="altered = true;"><br>
<input type="submit">
</form>
</body>
</html>

Ant
0
 
LVL 15

Expert Comment

by:a.marsh
ID: 6440702
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
0
 
LVL 15

Expert Comment

by:a.marsh
ID: 6440707
Sorry, that should say "not want" instead of "now want".

Ant
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 6440982
IE:
onBeforeUnload="if (altered) returnValue='Are you sure'"
0
 
LVL 15

Expert Comment

by:a.marsh
ID: 6441019
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
0
 

Expert Comment

by:podishetty
ID: 6441216
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>
0
 

Expert Comment

by:podishetty
ID: 6441218
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>
0
 
LVL 15

Expert Comment

by:a.marsh
ID: 6441256
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
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 8

Expert Comment

by:bebonham
ID: 6441784
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.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 6442445
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
0
 
LVL 1

Expert Comment

by:Moondancer
ID: 6728001
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:

http://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.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 6728705
Moondancer: I think a single click on the member name would suffuce ;-)

Michel
0
 
LVL 1

Expert Comment

by:Moondancer
ID: 6803254
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
0
 

Expert Comment

by:francis_tudlong
ID: 9016452

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
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 9017911
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
0
 

Expert Comment

by:francis_tudlong
ID: 9024321
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>
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 9024362
Yep "with an ugly hack that measures the window size "
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now