SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    ********* Ornithologist AtomicPenguin's Avatar
    Join Date
    May 2002
    Location
    Vancouver, BC
    Posts
    459
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    addEventListener / adding onChange handler for all input elements

    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! :-)

    A.P.

  2. #2
    SitePoint Zealot execute's Avatar
    Join Date
    Dec 2005
    Location
    Florida
    Posts
    150
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    addEventListener only works for FireFox, attachEvent should be used for IE. So use both!
    Inferno Programming Tutorials has articles by experts.

  3. #3
    ********* Ornithologist AtomicPenguin's Avatar
    Join Date
    May 2002
    Location
    Vancouver, BC
    Posts
    459
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the input! Will do.

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

  4. #4
    SitePoint Zealot execute's Avatar
    Join Date
    Dec 2005
    Location
    Florida
    Posts
    150
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    addEventListener('onload', function); i think im not sure, i cant remember
    attachEvent is same.
    Inferno Programming Tutorials has articles by experts.

  5. #5
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could do it this way as apposed to object detection.

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

  6. #6
    Maniacally depressed robot poncho's Avatar
    Join Date
    Dec 2004
    Location
    Belfast, N.Ireland
    Posts
    452
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    PHP Code:
      function addEvent(objevTypefn) {
          if (
    obj.addEventListener) {
                 
    obj.addEventListener(evTypefnfalse);
                 return 
    true;
          } else if (
    obj.attachEvent) {
                 var 
    obj.attachEvent("on"+evTypefn);
                 return 
    r;
          } else {
                 return 
    false;
          }
      }
      
      function 
    isChanged (el) {
          
    alert(el.value);
      }
      
      function 
    inputHandler() {
          if(!
    document.getElementsByTagName) return;
          var 
    inputsselectstextareasi;
          
          
    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
    Perfecting the art of breaking stuff.
    Check 'em: CakePHP | TextMate

  7. #7
    d^_^b Iain G's Avatar
    Join Date
    Nov 2005
    Location
    Gloucester, UK
    Posts
    262
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Coding and design philosophy:
    Keep It Simple, Stoopid

  8. #8
    ********* Ornithologist AtomicPenguin's Avatar
    Join Date
    May 2002
    Location
    Vancouver, BC
    Posts
    459
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Excellent, thanks so much! This gives me plenty of ideas.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •