All about Lotus Domino Development (AaLDD)

This posting is merely a big ‘thank you’ to Philippe Gauvin’s posting ’Warning before navigate away from a web form without save’ and Simon Willison’s posting ‘Simple Tricks for More Usable Forms’.

Philippe describes how you can add a function that warns users when they intend to leave the window without actually saving the document. Simon describes the way how to add event listeners to forms, which is a great add-on Philippe’s article because Philippe ‘forgets’ to write how he implemented the code to work.

So what is the idea?

• a users has a form opened
• when he clicks on a link that leads him to another page a warning comes up if he really wants to leave the page without saving or if he wants to stay on the form so the document can be saved
• the condition I added is: if there are changes made to required fields then I think the user has actually worked on interesting information, so in these cases the warning should pop-up.

In my example each required field has a classname ‘required’ (a bit based upon Andrew Tetlaw’s really kewl javascript form validation method). When there is a difference between entering the field and leaving the field a third field will change from value “0″ to “1″ which should initiate the warning.

Adding Eventlistening

I did not want to add into every single field a function that would check if there have been made changes, so on the windows load event we add an eventlistening. As soon as the user enters and leaves one of the ‘required’ fields we run an onfocus or an onblur function.

How to implement?

Just follow Philippe’s instructions. Basically I added a Notes field, gave it an id ‘IsChanged’, default value is set to “0″ and I made it hidden. Then I copied in the JSHeader of my form the first part of the code:

// 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 ?”;
}

(by the way, yes we use the Prototype library)

Second, based upon Simon’s article I added the next lines of code in the JS Header:

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

function addEvent(obj, evType, fn){
 if (obj.addEventListener){
     obj.addEventListener(evType, fn, false);
     return true;
  } else if (obj.attachEvent){
     var r = obj.attachEvent(“on”+evType, fn);
     return r;
  } else {
     return false;
  }
}

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 

 This initates the event listening for the onblur and onfocus events of the fields with classname ‘required’. That’s it. I do not know how I can adjust the default warning popup, but I guess sure one of you know: