Solved

Confirm exit/save changes popup

Posted on 2002-04-05
9
2,240 Views
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">
</form>

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!

Ted
0
Comment
Question by:etchen
9 Comments
 
LVL 53

Accepted Solution

by:
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.

Cd&
0
 
LVL 5

Expert Comment

by:kcm76
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.

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
     var aProfile = new Array();
     function loadArray()
     {
          aProfile['txt1'] = "Name";
          aProfile['txt2'] = "Edu.Qual";
          aProfile['txt3'] = "Experience";
          aProfile['txt4'] = "email";
     }
     function checkData()
     {    
          var i=1;
          while(i)
          {
           
           if(document.all("txt"+i)==null)
             i=-1;
           else
            {
             var stri = document.all("txt"+i).value;
             
             if (stri!=aProfile["txt"+i])
             {
               alert(aProfile["txt"+i]);
               alert("Data Changed.......Do u want to save?");
               i = -1;
              }
             }
             i= i+1
          }
     }
</SCRIPT>
<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>
</BODY>
</HTML>


KCM
0
 
LVL 12

Expert Comment

by:lexxwern
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;


lexxwern
0
 
LVL 75

Expert Comment

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

or

<html>
<head>
<script>
submitted=false;
changed=false;

function myunload() {
   if (submitted) return
   else if (changed) event.returnValue ="Changes have been made, would you like to save"
}
window.onbefore=myunload;
</script>
</head>
<body>


Michel
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 75

Expert Comment

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

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

Expert Comment

by:COBOLdinosaur
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?

Cd&
0
 
LVL 75

Expert Comment

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

Michel
0
 

Author Comment

by:etchen
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!

Ted
0
 
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="window.open('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
<script>
window.close()
</script>

Michel
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
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…

867 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

12 Experts available now in Live!

Get 1:1 Help Now