Update: ‘Warning before…’

Here is an updated version of the JS header, now fully making benefit of prototype’s Event.observe event listener. Note: the code is not updated in the download link you can find here.

// SHOWING A WARNING WEN USERS LEAVE THE FORM WITHOUT SAVING
function formChange(){ 
 $(‘isChanged’).value=”1″;
}

window.onbeforeunload = confirmExit;

function confirmExit() { 
 if($F(‘isChanged’)==’1′){
  return “You have not saved the form yet. Are you sure ?”;
 }
}

Event.observe(window, ‘load’, init, false);

function init(){
 var inputs = $$(‘input.required’);
  for (var i = 0; i < inputs.length; i++) {
     Event.observe(inputs[i], ‘focus’, oninputfocus);
     Event.observe(inputs[i], ‘blur’, oninputblur);
  }
  var textareas = $$(‘textarea’);
  for (var i = 0; i < textareas.length; i++) {
     Event.observe(textareas[i], ‘focus’, oninputfocus);
     Event.observe(textareas[i], ‘blur’, oninputblur);
  }
}

var tempinputvalue =””;

function oninputblur(e) {
 if (typeof e == ‘undefined’) {
  var e = window.event;
 }
 var source;
 if (typeof e.target != ‘undefined’) {
  source = e.target;
 } else if (typeof e.srcElement != ‘undefined’) {
  source = e.srcElement;
 } else {
  return true;
  }
 if ($F(source) != tempinputvalue) {
  $(‘isChanged’).value=”1″
 } 
}

function oninputfocus(e){
 if (typeof e == ‘undefined’) {
  var e = window.event;
 }
 var source;
 if (typeof e.target != ‘undefined’) {
  source = e.target;
 } else if (typeof e.srcElement != ‘undefined’) {
  source = e.srcElement;
 } else {
  return true;
 }
 tempinputvalue = $F(source)
}
// END – SHOWING A WARNING WEN USERS LEAVE THE FORM WITHOUT SAVING

I noticed that WordPress uses a similar technique when writing posts.