I want a javascript function (probably to be called OnUnLoad) that can dynamically assess whether any forms that may be on the page have been altered and if so prompts the user (via a confirm box) to save their changes if the user attempts to navigate away from the page without submitting a form. I don't want the function to be specific to one particualar form. I think it is possible to loop through all the forms on the page and loop through the fields and compare them to the values in the reset array to determine if any changes have been made. I'm just not good enough with javascript to do it.
Any examples would be greatly appreciated.
Thanks,
Scott
This Question has been solved and asker verified All Experts Exchange premium technology solutions are available to subscription members.
Experts Exchange has been collecting answers to technology questions since 1996…3 million and counting! If you have a question, chances are we already have your answer.
If you can't find the exact answer you're looking for, ask our exclusive community of 50,000 experts. You’ll get a personalized answer from a trusted professional.
Thousands of free tech tips, tricks, how-to’s and tutorials are available in our peer reviewed articles section. See for yourself how smart our experts are, no login required.
Save solutions to your questions, answers you’ve discovered through searching plus helpful articles in your personal knowledgebase for easy future access.
Access the answers to your technology questions today.
30-day free trial. Register in 60 seconds.
Members of the expert community talk about why the experience at Experts Exchange is different than what you will find anywhere else.
Try it out and discover for yourself.
30-day free trial. Register in 60 seconds.
Join the community of experts here and help other tech pros by answering question in your area of expertise. You can earn FREE access to all Experts Exchange's premium features and resources.
onUnload is not going to do it. You need to use onBeforeUnload to confirm they want to exit without saving.
Before exiting you can do this! IE4+ only!!!
window.onbeforeunload=afun
function afunction()
{
// statements you want to execute
return "message"; //if a text string is returned it will be used
} //for a dialog box
The event cannot be trigger from an HTML tag, the event
call has to go in the HEAD of the document
Cd&
I haven't got time to write the function I'm afraid, I'm sure someone else will though. The theory is: in your body tag have an onLoad to fire a function that loops through document.forms['yourform']
I can provide the code that will loop through and grab all of the values--but that might be somewhat cumbersome. Another possibility is to declare a global value that will get modified if any changes take place:
<SCRIPT LANGUAGE=javascript>
<!--
var bolChanged = false;
function setChanged(){
bolChanged = true;
}
function alertUser(){
if(bolChanged){
return(confirm("Are you sure that you want to exit without submitting your data?"));
}
return true;
}
//-->
</SCRIPT>
Fritz_the_blank's suggestion sounds like it would probably be easier but then I would have to make sure every form field called the setChanged() function onchange, And there are a lot of forms and form fields through out this application. I was kind of hoping for a function that I can place in my Header and not have to worry about whenever I create a new form for the application.
Multiple forms:
<body onLoad=saveAll()>
function saveAll()
{
frmArray=document.forms;
Then the validation would look something like:
function findChange()
{
for (j=0;j<frmArray.length;j++
{
anArray=frmArray[j].elemen
for (i=0;i<anArray.length;i++>
{
if (anArray[i]!=document.form
}
}
return false;
}
Cd&
Well, I've made a script that sort of does the trick. However, if the user clicks 'Cancel', a box still pops up (made by IE) which is annoying. I'll try to get rid of that...
<script>
var def=new Array(2);
def[0]=new Array('txt1','txt2',false)
def[1]=new Array(false,'cars','textar
function chk(){
var valid=true;
for(i=0;i<def.length;i++){
for(j=0;j<def[i].length;j+
var obj=document.forms[i].elem
if(obj.type=='checkbox'){i
else if(obj.value!=def[i][j]){v
}}
if(valid==false){
if(!confirm("You've changed the data. Exit?")){return false;}
}}
</script>
<body onBeforeUnload="return chk()">
**Form 2**
<form>
<input type=text value=txt1>
<input type=text value=txt2>
<input type=checkbox>
</form>
**Form 2**
<form>
<input type=checkbox value=false>
<select>
<option selected value=cars>Cars
<option value=trucks>Trucks
</select>
<textarea>textarea</textar
</form>
</body>
Ok, I just realized you can just have 1 confirm. Unfortunately you cannot change the text on this confirm:
<script>
var def=new Array(2);
def[0]=new Array('txt1','txt2',false)
def[1]=new Array(false,'cars','textar
function chk(){
var valid=true;
for(i=0;i<def.length;i++){
for(j=0;j<def[i].length;j+
var obj=document.forms[i].elem
if(obj.type=='checkbox'){i
else if(obj.value!=def[i][j]){v
}}
if(valid==false){return '';}
}
</script>
<body onBeforeUnload="return chk()">
**Form 2**
<form>
<input type=text value=txt1>
<input type=text value=txt2>
<input type=checkbox>
</form>
**Form 2**
<form>
<input type=checkbox value=false>
<select>
<option selected value=cars>Cars
<option value=trucks>Trucks
</select>
<textarea>textarea</textar
</form>
<a href=# onClick='self.close()'>a</
</body>
Hello lil,
you can not change the existing warning text, but you can extend the warning text:
function chk(){
var changed='';
for(i=0;i<def.length;i++){
for(j=0;j<def[i].length;j+
var obj=document.forms[i].elem
if(obj.type=='checkbox'){i
else if(obj.value!=def[i][j]){c
}}
if(changed>''){return 'Some '+changed+' Changed!!!';}
}
OK, here is what I came up with. I basically ended up having to combing sugestions from Cobol, Lil Pufball, and Zvonko, and add a little bit of my own to get what I really needed.
The saveAll() function Cobol sugested did save the values of the form but when the form values got changed by the users they got changed in both the document.forms array AND in the frmArray, so I made a new saveAll function which basically creates a 2 dimensional array of the values of each form field.
I think when cobol did the following:
frmArray=document.forms;
it only set the variable frmArray as a pointer to document.forms, it did not actually create a new array.
On the findChange() function is where I really combined the three sugestions in with my revised frmArray variable.
Here is the code:
<script>
function saveAll(){
frmArray=new Array(document.forms.lengt
for (j=0;j<frmArray.length;j++
frmArray[j] = new Array(document.forms[j].el
for (i=0;i<document.forms[j].e
frmArray[j][i] = document.forms[j].elements
}
}
}
function findChange(){
var valid=true;
for (j=0;j<frmArray.length;j++
for (i=0;i<frmArray[j].length;
if (frmArray[j][i]!=document.
valid = false;
}
}
}
if(valid==false){return "You have unsaved changes on this page!";}
}
</script>
<body onLoad="saveAll()" onBeforeUnload="return findChange()">
**Form 2**
<form>
<input type=text value=txt1>
<input type=text value=txt2>
<input type=checkbox>
</form>
**Form 2**
<form>
<input type=checkbox value=false>
<select>
<option selected value=cars>Cars
<option value=trucks>Trucks
</select>
<textarea>textarea</textar
</form>
<a href="http://www.coldfusio
</body>
I am going to award cobol the points for this question and I am going to post a new question with 500 points for Lil puffball because your guys's input helped the most. I am going to post a question for 200 points for zvanko for the tidbit about being able to add to the pop up(that was very helpful too).
Business Accounts
Answer for Membership
by: SBennettPosted on 2003-04-22 at 16:36:16ID: 8377068
BTW, This will only need to work in IE 6 as it is for an intranet application and all the users will be using IE 6.