Now we are on to part two of this n part series.  I say n because even I don't know when this will all end.



Where we left off

In the previous article we had the basic parts of the field hints for our form system.  The JavaScript would automatically hook all the edit boxes to their labels and then fill the edit box with the label contents when necessary and show the user input at other times.  It also adds CSS class information to stylize the inputs based on their current state.

In this article we will move closer to a degradable form system and speed up what we have already written.  We need the speed increase because we now capture any submit button with a class of TSubmit and then reset the contents of each input box if it is still showing a hint.  This means the script that is called will get the content the user entered and not the hints that we forced into the boxes.

So rather than dwell on the minutia, here is the new JavaScript.  The changes will be obvious if you look at the first article.

// Simple caching of dom items.
var allEdits = false;
var allLabels = false;

// Gets the text from the matching label.
function getLabelText(id) {
  var result = '';
    
  allLabels.action ({
    initialize: function(){ 
      if (this.htmlFor == id) {
        result = this.firstChild.nodeValue;
      }
    }
  });
  
  return result;
}


// Hook up the UI interactions for form elements  
function initializeFormElements() {
  allEdits = $S('input.TEditBox');
  allLabels = $S('label');
  
  // Hide the labels
  allLabels.action ({
    initialize: function() {
      this.style.fontSize = '1px';
      this.style.width = '1px';
      this.style.visibility = 'hidden';
    }
  });
  
  // Hook up the edit functionality.
  allEdits.action ({  
    initialize: function(){ 
      if(this.value == '') {
        this.value = getLabelText(this.id);
        Element.addClassName(this, 'TEditBoxCaption');
      } else {
        Element.addClassName(this, 'TEditBoxLostFocus');
      }      
    },
    onblur: function() {
      if(this.value == '') {
        Element.addClassName(this, 'TEditBoxCaption');
        this.value = getLabelText(this.id);
      } else {
        Element.addClassName(this, 'TEditBoxLostFocus');
      }      
    },
    onfocus: function() {
      if(this.value == getLabelText(this.id)) {
        this.value = '';
      }    
      Element.removeClassName(this, 'TEditBoxCaption');
      Element.removeClassName(this, 'TEditBoxLostFocus');
    }
  });

  // When the user clicks a submit button, we reset the input boxes that might still have the hint text in them.  
  $S('input.TSubmit').action ({
    onclick: function() {
      allEdits.action ({  
        initialize: function(){ 
          if(this.value == getLabelText(this.id)) {
            this.value = '';
          }      
        }
      })
    }
  });
}

Related Posts

Forms with moo.fx part 1
Drop Shadows with moo.fx
Simple Ajax Code-Kit (fixed)
Ajax Tabs Reloaded: based on the Havoc Studios article
FRIA, the other, other lame buzz word

---