[thelist] advise on approach, pls

[jsWalter]

I have a need to extend the functionality of certain HTML Form Elements,
namely TEXT & PASSWORD boxes and TEXTAREAs.

What I need I have working. I'm just trying to find a "better way".

If I explain what I'm doing, maybe you might be able to answer my real
question, at the end of this.

Currently, I walk down the entire length of the FORM Object, looking for
these types of Elements. If found, they are dropped into another array.

(Maybe it this part could be improved for this loop to call a method to do
all the work, instead of dropping found items to another array and then do
work on that array. mmm :/ )

Like this...

   // loop through all FORM Objects
   for (var i = 0; i < form.length ; i++)
   {
      // We are looking for INPUT Objects with the TYPE
      // of TEXT and PASSWORD.
      // We are also looking for TEXTAREA Objects
      if ( ( ( form.elements[i].nodeName == "INPUT" ) &&
         ( form.elements[i].type == "text" ) ||
         ( form.elements[i].type == "password" ) ) ||
         ( form.elements[i].nodeName == "TEXTAREA" ) )
         // if we find any of these, PUSH them into our Array
         // We don't use PUSH because not all JS engines have it
      {
         aryTargetTags[y] = form.elements[i];
         y++;
      }
   }

If I have anything, I then walk down that [!] array and look for certain
attributes...

   // We only want to do this if the Object is set for it
   if ( ( aryTargetTags[i].getAttribute('progress') ) &&
        ( aryTargetTags[i].getAttribute('maxlength') > 0 ) )
   {

If these attributes are found I insert a new Document Object to display a
small status bar...
(NOTE: The comments talk about TEXTAREAs, that is what I started with. But
it all
       works with either TEXTAREAS or TYPE=TEXT/PASSWORD as well.)

      // Create a new OBJECT
      objBar = document.createElement("SPAN");
      objBar.setAttribute("id",aryTargetTags[i].id + '_pad');

      // get the TEXTAREA and its parent
      objTA = aryTargetTags[i];
      objParent = objTA.parentNode;

      // insert it in the children of objectparent before the sibling of the
TextArea
      objParent.insertBefore(objBar,objTA.nextSibling);
      // Create Bar Graph for TEXTAREA
      objBar.innerHTML = buildStatusBar ( aryTargetTags[i].id , 250 );

Once that new Object is created, I add event handlers to the Form Element in
question...

      // Insert new Method to Form Element
      aryTargetTags[i].setBar = setBar;

      // Now attach Event Actions
      aryTargetTags[i].onpaste    = setBar;
      aryTargetTags[i].onkeypress = setBar;
      aryTargetTags[i].onkeyup    = setBar;

      // Make the default value available
      aryTargetTags[i].setBar();
   }

OK, so now, if any TEXTAREAs, TEXT or PASSWORD elements found with the new
attributes of 'progress' AND 'maxlength' (maxlength is an existing attribute
to TEXT and PASSWORD, but not TEXTAREA) they have 3 element handlers added
to them.

This works. It works fine.

(Actually, the status bar works in IE and Mozilla, but not Opera. But that
is another issue I will tackle later)

What I was wondering, do you know of anyway of "registering" any Form
Elements with some method that I can do the same thing?

Meaning, some way to telling my setDisplayLimit() method to attach itself to
a particular Form Element (which is what I have done) in a more direct
manner. Something other than looking at every single Form Element and asking
if it needs this method (which is what I'm doing now)?

Any ideas?

Thanks

Walter