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;

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"

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
JDeveloper 12c for 32 bit 4 36
Hidden Field Value 10 37
Put upload button on your image and change it 2 29 mvc foreach 3 15
Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
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…

743 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

11 Experts available now in Live!

Get 1:1 Help Now