help with confirm window close script...

babelfish

07-28-2010, 11:10 AM

hi all,

ok, i have been asked to alter our project management system (one i wrote) to alert users to the fact that they are closing windows with unsaved work in - some of them forget they have edited a page and just close the window.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
var docChanged = false;

function docChange(){
docChanged = true;
}

function checkForChanges() {
if(docChanged == true) {
return "All changes made to this page will be lost!";
}
}

window.onbeforeunload = checkForChanges;
</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
<label>
<input type="text" name="one" id="one" onchange="docChange()" />
</label>
<label>
<input type="text" name="two" id="two" onchange="docChange()" />
</label>
<br />
<a href='http://www.google.com'>Google</a>
</form>
</body>
</html>

the above will prompt the user if they want to save if fields etc have been changed.

is there a way i can dynimcally add the onchange="docChange()" to all fields on a page? the system has hundreds of fields and doing a mass search and replace might be very dangerous lol. im pretty sure it can be done but wouldnt know where to start. ive never really had enough time to learn all the window.addEventListener stuff.

Kor

07-28-2010, 12:13 PM

Try this:

<script type="text/javascript">
window.onbeforeunload = function (evt) {
var message = 'All changes made to this page will be lost!';
if (typeof evt == 'undefined') {
evt = window.event;
}
if (evt) {
evt.returnValue = message;
}
return message;
}
</script>

Should work in all browsers, except Opera. Opera has a weird interpretation of the way a document closes/changes the session, thus it will not fire onbeforeunload, not even onunload and onload events same as the other browsers. If you can live with this, you may use that function :)

babelfish

07-28-2010, 01:31 PM

thanks kor, but thats not what im looking for.

i need to find a way to insert [[ onchange="docChange()" ]] on all form fields on a page. i only want the warning screen if someone has modified the text in a field. my method works fine, i just dont want to have to go through 30+ pages of forms adding onchange="docChange()" to all the form elements.

any ideas?

not bothered about opera btw as this is running on a IE8 local network

Kor

07-28-2010, 02:47 PM

So, your problem is to add dynamically an event to all the textfields? That is easy:

onload=function(){
var allInp=document.getElementsByTagName('input'), inp, i=0;
while(inp=allInp[i++]){
if(inp.type=='text'){
inp.onchange=docChange;
}
}
}

babelfish

07-28-2010, 02:58 PM

will try that. i guess i can alter it to cope with select boxes and check boxes too?

thanks mate!

Kor

07-28-2010, 03:08 PM

will try that. i guess i can alter it to cope with select boxes and check boxes too?
Not really. in case of select boxes or textarea, yes. But in case of checkboxes and radio buttons, the event to be used is onclick, not onchange, and the code would be a little bit more intricate, as you might need to find and set the default values (merely in case of radios).

babelfish

07-28-2010, 03:09 PM

Not really. in case of select boxes or textarea, yes. But in case of checkboxes and radio buttons, the event to be used is onclick, not onchange, and the code would be a little bit more intricate, as you might need to find and set the default values (merely in case of radios).

thanks mate, i will have a look, thanks for your help mate! codingforums still the best place to get any form of help :)