addEventListener / adding onChange handler for all input elements

JavaScript
1

Hi all,

I’ve been messing around with event listeners, but can’t figure out the correct syntax for doing this, so I thought I’d see if anyone could lend a hand.

I have a page with a large number of input fields - including radio buttons, checkboxes, textareas and dropdowns. I need to detect when the user’s changed any of these fields. In the past, I’ve manually added onchange handlers to each field, which seemed a good idea at the time, but now strikes me as rather labour intensive - to say the least.

I’d like to simply define one onchange handler for the HTMLInputElement, one for the HTMLSelectElement, etc. etc. so that it would simply toggle a “isChanged” global variable. Anyone have any idea about how to pull this off?

Thanks! :slight_smile:

A.P.

2

addEventListener only works for FireFox, attachEvent should be used for IE. So use both!

3

Thanks for the input! Will do.

How about syntax-wise. I don’t suppose you have an example of how this would work?

4

addEventListener(‘onload’, function); i think im not sure, i cant remember
attachEvent is same.

5

You could do it this way as apposed to object detection.


onload=function(){
    var inputs=document.getElementsByTagName('input'),i=0;
    do{
        switch(inputs[i].type){
            case 'button':
            inputs[i].onclick=function(){
                alert(this.value+'\
\
'+this.type)
            }
            break;
            case 'text':
            inputs[i].onfocus=function(){
                this.style.backgroundColor='blue'
            }
            inputs[i].onchange=function(){
                alert(this.value+'\
\
'+this.type)
            }
            break;
        }
    }
    while(inputs[++i])
}
6

AP,

There are a few ways you could go about this, (GPH’s way looks nice), but I prefer to do things like this, so that I can mix and match between functions and give me more flexibility.


  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;
  	}
  }
  
  function isChanged (el) {
  	alert(el.value);
  }
  
  function inputHandler() {
  	if(!document.getElementsByTagName) return;
  	var inputs, selects, textareas, i;
  	
  	inputs = document.getElementsByTagName('input');
  	for(i=0;i<inputs.length;i++) {
  		if(!(/submit/).test(inputs[i].getAttribute("type"))) {
  			inputs[i].onchange = function(){isChanged(this)};
  		}
  	}
  	
  	selects = document.getElementsByTagName('select');
  	for(i=0;i<selects.length;i++) {
  		selects[i].onchange = function(){isChanged(this)};
  	}
  }
  
  addEvent(window, 'load', inputHandler);

I hope that’s useful.

Cheers;
Poncho

7

Read PPK’s summaries of various methods:

http://www.quirksmode.org/js/events_tradmod.html
http://www.quirksmode.org/js/events_advanced.html

8

Excellent, thanks so much! This gives me plenty of ideas.