Confirm exit/save changes popup

Posted on 2002-04-05
Last Modified: 2010-08-05
I have a webpage that has a form with a user's profile on the page.  The user can edit his profile and save by clicking on the save button.  What I want to do is have it so that if he leaves the page but has made changes to his profile, it will do either of two things:

1) A pop-up box will state "Changes have been made, are you sure you want to exit?".  If the user clicks "yes" then it will continue redirecting to the page he was leaving to.  If he clicks "no" then it cancels his redirection and stays on the page with all the form data not changing.

2) A pop-up ox will state "Changes have been made, would you like to save?".  If the user clicks on "yes", then the javascript will submit the form (i.e. call the save button to submit) so that the data will save, and then continue with where the user was redirecting to.  If the user clicks on "no", then it just lets the user continue to redirect to where he was going.

My form HTML code looks like:

<form name="test" method=post action="http://localhost/servlet/test.savedata">
<input type=text name=name value="test name">
<input type=text name=email value="test email">
<input type=submit name=save value="Save">

This pop-up must only occur if the data in the form has changed from the original values.  I understand that perhaps this process flow might not be possible, if so, a suitable workaround that provides the same "warning" to the user would be most helpful.  Oh and the solution must work in Netscape and IE (other browsers too if possible).  Thanks!

Question by:etchen
LVL 53

Accepted Solution

COBOLdinosaur earned 200 total points
ID: 6922149
Once the user leaves, they are gone.  The data in the page is also gone as far as the browser is concerned.  You can put up a confirm to save, or a popup to save but you cannot transfer the data.  

If the second window is already opened, and the data is duplicated as it is entered in the main window it could be done, but there is nothing to stop the user from closing the second window.

There may be some way using an applet to use the link to the server after the user exits, so maybe I'll learn something but, I would say the chances are pretty slim.


Expert Comment

ID: 6922257
in the unload event u can write a small procedure that compares the current value in the text box with the original one. the original one can be kept in an array. if there is any change u give an alert saying that data has been changed.

following is the code which does the above one.

<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
     var aProfile = new Array();
     function loadArray()
          aProfile['txt1'] = "Name";
          aProfile['txt2'] = "Edu.Qual";
          aProfile['txt3'] = "Experience";
          aProfile['txt4'] = "email";
     function checkData()
          var i=1;
             var stri = document.all("txt"+i).value;
             if (stri!=aProfile["txt"+i])
               alert("Data Changed.......Do u want to save?");
               i = -1;
             i= i+1
<BODY onload="loadArray()" onunload="checkData()">
Edit ur Profile
<input type=text name=txt1 value="Name"><br>
<input type=text name=txt2 value="Edu.Qual"><br>
<input type=text name=txt3 value="Experience"><br>
<input type=text name=txt4 value="email"><br>

LVL 12

Expert Comment

ID: 6922354
What cd& said is absolutely right;

the new popup can have the previous page's data as hidden and can have a form to submit that; but if he has closed one page hell just end up closing this faster; keeping in mind that its a popup;

please tell if this solution nyway interests you;

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

LVL 75

Expert Comment

by:Michel Plungjan
ID: 6922601
IE5+ can do this:
<body onBeforeUnload="returnValue='Please save'">



function myunload() {
   if (submitted) return
   else if (changed) event.returnValue ="Changes have been made, would you like to save"

LVL 75

Expert Comment

by:Michel Plungjan
ID: 6922602
sorry, miussed changed:

<input type="....." onChange="changed=true" ...>
LVL 53

Expert Comment

ID: 6922847
But where does any of that save the changes?

They are still going to exit either by closing if the hit X or back to a previous page or to where a clicked link or address bar entry indicates.

Unless the data has been moved to a new window already I think it is gone.  No?

LVL 75

Expert Comment

by:Michel Plungjan
ID: 6923050
It stops the window from closing..


Author Comment

ID: 6925979
From what I can tell, there is no way to do this in Netscape.  I see that michel's solution works in IE, but I needed a solution that worked in both IE and Netscape.  I will try copying the data over to a popup and see if that works.  Thanks!

LVL 75

Expert Comment

by:Michel Plungjan
ID: 6926074
It won't.

You need to save to a cookie onChange or even onKeyUp of each field and clear the cookie in the result from the servlet. What you can do then is

<body onUnload="'http://http://localhost/servlet/test.savedata','newwin')">

and in the servlet see if the page was loaded using the form (value of submit is set) or if not, that the cookie is clear - if not show AGAIN the form, and if it is, return


Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
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…

808 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