Is there a way to track all changes in an HTML element?

Question

Is there a (good) way to track all changes in an HTML element?

I tried using javascript with jQuery but it does not work.

$('div.formSubmitButton input[type="submit"]').change(function(event){ alert(event); }); 

Somehow the style attribute is set on the submit button, but I can’t find where and how to do it.

UPDATE: my question was not specific jQuery

Answer 1

You can track changes made to the DOM element using mutationobservers:

 // select the target node var target = document.querySelector('div.formSubmitButton input[type="submit"]'); // create an observer instance var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { console.log(mutation); }); }); // configuration of the observer: var config = { attributes: true, childList: true, characterData: true } // pass in the target node, as well as the observer options observer.observe(target, config); 

http://jsfiddle.net/2VwLa/

This will give you a MutationRecord object with details of what has changed. Additional mutation information: https://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/

Answer 2

You can track changes in the input field or check on sending:

  $('form').submit(function(event){ alert("this gets called when form submitted here you can test differences"); }); $('form input[type="text"]').change(function(event){ alert("this gets called when and text input field gets changed"); }); 

even more you can check keyboard input for specific input fields:

  $('form input[type="text"]').keydown(function(event){ alert("this gets called on key board input before the data is inserted in input field"); }); $('form input[type="text"]').keyup(function(event){ alert("this gets called on key board input after the data is inserted in input field"); }); 

Note. type="text" is just an example, which will probably also require your password and email fields to be included. (and select the checkboxes if you use the change event)

Answer 3

Ok, I found this question, Detecting changes to the contents of an element using jQuery . The answers are pretty good and relevant (hopefully).