...

View Full Version : Label properties for form elements



beetle
02-14-2003, 08:55 AM
Ok, this is pretty simple, but if you've ever wished that the DOM exposed a label property for any form element that had a label specified for it, well, you'll enjoy this.

!! UPDATED A FEW POSTS DOWN !!
function addLabelProperties( f )
{
var labels = f.getElementsByTagName( "label" );
for ( var i = 0; ( label = labels[i] ); i++ )
f.elements[label.htmlFor].label = label;
}Just pass it a reference your form and voila! You now have element.label :D

brothercake
02-22-2003, 02:20 AM
That's really cool :) I'm sure there's potential for usability/accessibility widgets with that - being able to iterate through a form by element/label association - it could make complicated forms more useable by (for example) generating a summary-map with labels and accesskey associations. Nice :cool:

beetle
02-22-2003, 04:28 AM
I know! I can't see myself doing any dynamic form stuff w/o this! Sometimes the simplest things are the coolest! I can even integrate this with fValidate...instead of error-coloring the elemnt itself, I can color the label or even add an "Error" next to the label :D

jkd
02-22-2003, 04:51 AM
Hmm, it might be a bit better to do something like:

HTMLInputElement.prototype.__defineGetter__('label', function() {
var labels = document.getElementsByTagName('label');
for (var i in labels) {
if (labels[i].htmlFor == this.id) return labels[i];
}
return null;
});

:) Now even dynamically created form elements will inherit the label property... of course, gecko is the only browser cool enough to expose constructors for DOM interfaces, but hey, it rocks anyway.

beetle
02-22-2003, 05:04 AM
Originally posted by jkd
Hmm, it might be a bit better to do something like:I think we'd best first decide on how that is "better"

I think it gets the job done "better" but from a standpoint of actually making use of it in today's browser audience, it is far from "better"

A workaround for dynamically made elements, you'd most likely be making the label AND the element at the same time, so tying the two together at creation shouldn't be that difficult

jkd
02-22-2003, 05:10 AM
Originally posted by beetle
I think it gets the job done "better" but from a standpoint of actually making use of it in today's browser audience, it is far from "better"

Oh yes, but I'm a theory guy. Theory is almost always more interesting than application, and usually better. ;)

Stupid application. :D

beetle
02-22-2003, 05:13 AM
I guess that makes me an "application guy" ;)

Stupid theory :D

beetle
06-18-2003, 06:57 PM
Here's the updated version. It handles all form controls and has a few other fault tolerance measures. I also commented it


function addLabelProperties( f )
{
// Collect all label elements in form, init vars
if ( typeof f.getElementsByTagName == 'undefined' ) return;
var labels = f.getElementsByTagName( "label" ),
label,
elem,
i = j = 0;

// Loop through labels retrieved
while ( label = labels[i++] )
{
// For Opera 6
if ( typeof label.htmlFor == 'undefined' ) return;

// Retrieve element
elem = f.elements[label.htmlFor];

if ( typeof elem == 'undefined' )
{ // No element found for label
alert( "No element found for label: " + label.htmlFor );
}
else if ( typeof elem.label != 'undefined' )
{ // label property already added
continue;
}
else if ( typeof elem.length != 'undefined' && elem.length > 1 && elem.nodeName != 'SELECT' )
{ // For checkbox arrays and radio-button groups
for ( j = 0; j < elem.length; j++ )
{
elem.item( j ).label = label;
}
}
// Regular label
elem.label = label;
}
}

This is the version of this function I'm using in fValidate - and it works great!

FoxtrotU
06-19-2004, 02:32 AM
Beetle,

I was wondering if this will help me out with the my post about reading the labels of radio and check buttons? I am extremely new to this and would like an example of how to use your function. Any help would be appreciated.

Thanks.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum