[Javascript] advise on approach, pls

[Mike Dougherty]

/* get a reference to the main object container */
var objContainer = document.yourform ;
/* get all the "TextArea" objects inside the container */
var objs = objContainer.getElementsByTagName("TEXTAREA")

/* iterate the objs collection, in lieu of a for..each construct */
for (lnI=0; lnI < objs.length; lnI++) {
	/* if this object has a maxlength attribute great than zero */
	if (objs[lnI].maxlength > 0) {
		/* set the current object's attribute */
		objs[lnI].setBar = setBar 
		} /* if (objs[lnI].maxlength > 0) */
	} /* lnI */

Obviously you'll have to modify this example.  What I like about this
approach is that you can easily change the objContainer reference to
include a span (or other block-level tag) that encompasses the part of
your form that has the objects you want to work on.  Ex:  I mimicked a
buttonstrip using: 
<span id='buttonstrip'>
  <span id='button1' class='mybutton'
onClick='btnClick(this)'>Button1</span>
  <span id='button2' class='mybutton'
onClick='btnClick(this)'>Button2</span>
</span>

The objContainer reference would specifically get the "buttonstrip"
object, then the objs reference would get all the contained SPAN tags.
It worked really well (for us) because it follows a familiar object
model.

-----Original Message-----
From: javascript-bounces at LaTech.edu
[mailto:javascript-bounces at LaTech.edu] On Behalf Of Walter Torres
Sent: Monday, October 06, 2003 11:53 PM
To: [JavaScript List]
Subject: [Javascript] advise on approach, pls


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


_______________________________________________
Javascript mailing list
Javascript at LaTech.edu
https://lists.LaTech.edu/mailman/listinfo/javascript