Page 1 of 1

Generate an object checksum (or alternative?)

Posted: Mon Sep 18, 2006 3:22 pm
by Chris Corbyn
When my page loads it has some dynamic (generated client side) form elements in it. I'm too lazy to go through checking exactly what the dynamic content is and I just need to know if it gets modified in anyway after the page loads so I wanted some quick way of doing something like generating a checksum of the object's state when the page loads and then generating another one before the page is left (a new form submission). If the two checksums match the dynamic content was left untouched by the user; if they don't match the user changed something.

I tried using a recursive clone() function to copy the element at page load and then compare it with the real element at the end but they always prove to be different even when nothing gets modified so that doesn't work for me :(

Just need something like:

Code: Select all

originalChecksum = checksum(document.getElementById('my_id'));

//User does whatever

if (checksum(document.getElementById('my_id')) != originalChecksum)
{
    alert('You modified the form');
}
I *could* go through everything and figure it all out but the amount of logic needed would be lots.

I know it's a dirty hack but does anybody have any clues if this might be possible? Or something similiar?

:)

Posted: Mon Sep 18, 2006 3:51 pm
by n00b Saibot
supposedly some properties like readyState etc. change between the time you generate the checksums? just an idea...

Posted: Mon Sep 18, 2006 3:53 pm
by Weirdan
well, it's simply useless, since everything is checked on the client-side
Though, you could get all the name-type pairs belonging to the specific forms and hash that:

Code: Select all

var treeWalker = function(root, callback) {
   callback.process(root);
   if(root.hasChildren()) {
       for(var i=0, l=root.childNodes.length; i<l; i++) {
           treeWalker(root.childNodes[i], callback);
       }
   }
}
var NameTypeGatherer = {
   var gathered: '',
   var process : function(node) {
      if(!node.name || !node.type)
          return; // process only form controls
      if(this.gathered.length)
         this.gathered += '|';
      this.gathered += node.name + ':' + node.type;
   }
   var getResult: function() {
       return this.gathered;
   }
}

window.addEventListener('load', function(e) {
     treeWalker(document.getElementById('my_id'), NameTypeGatherer);
     window.originalChecksum = hash(NameTypeGatherer.getResult());
     NameTypeGatherer.gathered = '';
     
     document.getElementById('my_id').addEventListener('submit', function(e) {
          treeWalker(document.getElementById('my_id'), NameTypeGatherer);
          if(window.originalChecksum != hash(NameTypeGatherer.getResult())) {
                  // tampered
          }            
     }, false);
}, false);

Posted: Tue Sep 19, 2006 6:16 pm
by Chris Corbyn
Thanks guys. I've decided to go the long way around this and just write out all the logic.

That's a *yawn* from me in this particular instance :P

Posted: Tue Sep 19, 2006 9:34 pm
by n00b Saibot
If you were really after checking if particular form element has chnaged or not I suppose you could write a walker that would go thru each form element and store the state particular to them i.e. it will be knowing that it has to store value field for a text field and selectedIndex for a select box. Store the resultant array and match the two arrays... this way you get to know exactly which elements were modified and with what value.

Hope you like the idea :)