Compare form field values when page loads and unloads

[effex0r]

Hi,

I have a site with a few pages and different forms on each page (like lots of sites.) If a user visits a page, modifies a value in one of the form fields and then clicks away to another page without hitting save I would like to throw up an alert asking if they would like to save before changing pages.

To do this I'm guessing I need to loop through the form values when the page loads, store the values in some sort of structure (like an array or object) and do the same when it unloads (window.onunload), and then compare the two to see if any changes were made.

Alas, I'm not sure how to do this. I know how to loop through a form. Just do something like:

var theForm = document.forms[0];
for(i=0; i<theForm.elements.length; i++) {
}

One way I tried is to make an object like:

function formSnapshot() {

}

and then when the page loads create a new instance, and add properties using the prototype, like this:

function cacheFormValues() {

  var snapshot = new formSnapshot();

  var theForm = document.forms[0];
  var propertyName = new Array();
  for(i=0; i<theForm.elements.length; i++) {

    propertyName[i] = theForm.elements[i].name;
    snapshot.prototype.propertyName[i] = theForm.elements[i].value;

  }
}

The problem is, JS won't allow me to use the line
snapshot.prototype.propertyName[i] = theForm.elements[i].value;

Does anyone have any ideas about how I may solve this problem, or about how to add dynamic property names to an object using object.prototype.dynamic_name ?

t {H} a n K s

[Kravvitz]

I don't see any need for using prototypes.

Check out this thread..

[effex0r]

Perfect. Thanks very much.

[Pepejeria]

There is no need store the values once the page loads. They are automatically stored in defaultValue property for text text fields, defaultSelected for dropdowns etc

[Kravvitz]

effex0r, you're welcome

Pepejeria, the script in the thread I linked to do use the defaultValue, defaultChecked and defaultSelected properties.

[effex0r]

Actually, I had a question about the code you posted in the other thread. In it you mention "at least one option in each select needs to have selected="selected" for it to work properly in IE."

The system I am working does not always have that in every select (it does is some). Is there any way around this? That is, is there a way to make this work for any "select" element?

Also, what does this do?
f.type.indexOf('select') != -1

t h a n k S

[Kravvitz]

Actually, I had a question about the code you posted in the other thread. In it you mention "at least one option in each select needs to have selected="selected" for it to work properly in IE."

The system I am working does not always have that in every select (it does is some). Is there any way around this? That is, is there a way to make this work for any "select" element?

the script will always trigger on a select that doesn't have an option set to be selected by default. You could set the first option in the <select> as selected.

Also, what does this do?
f.type.indexOf('select') != -1

Normal select elements have a type of "select-one". Select elements that are set to multiple have a type of "select-multiple", so that tells if the element is either.

Edit: Here's an updated version of the script that should fix the issue of not having an element with defaultSelected=true

function unloadCheck() {
  // onunload doesn't work for this; you have to use onbeforeunload
  // IE4+/Win, Firefox, Mozilla 1.7a+, Netscape 7.2+, and Safari 1.3+ support 
  // onbeforeunload. Konqueror 3.3+ seems to have this functionality built-in
  // but does not support this event.
  var flds = document.form1.elements;
  var msg = 'custom message'; // false
  var f,hasDefault,aLen;
  for(var i=0;i<flds.length;i++) {
    f = flds[i];
    if(typeof(f.type)!='string') continue; // to ignore fieldset elements
    if((f.type == 'password') || (f.type == 'text') || (f.type == 'textarea')) {
      if(f.value != f.defaultValue) { return msg; }
    } else if((f.type == 'checkbox') || (f.type == 'radio')) {
      if(f.checked != f.defaultChecked) { return msg; }
    } else if(f.type.indexOf('select') != -1) {
      hasDefault = 0,aLen = f.length;
      for(var j=0;j<aLen;j++)
        if(f.options[j].defaultSelected) { hasDefault = 1; break; }
      if(!hasDefault) {
        // if there is no default but an option other than the first is 
        // selected than the form was changed
        for(j=1;j<aLen;j++) if(f.options[j].selected) return msg;
        // else if any option is selected it's the first, so we temporarily
        // set the first option's defaultSelected property to true
        f.options[0].defaultSelected = true;
      }
      for(j=0;j<aLen;j++)
        if(f.options[j].selected != f.options[j].defaultSelected) return msg;
      // change the first option back to not being default
      if(!hasDefault) { f.options[0].defaultSelected = false; }
    }
  }
}
window.onbeforeunload = unloadCheck;

[effex0r]

Very cool. Thank you.