Solved

Confirm exit/save changes popup

Posted on 2002-04-05
9
2,250 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
Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

 
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
 
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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Suggested Solutions

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…

770 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