Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Label properties for form elements

    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 !!
    Code:
    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
    Last edited by beetle; 06-18-2003 at 06:59 PM.
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #3
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #4
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    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.

  • #5
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #6
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    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.

  • #7
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I guess that makes me an "application guy"

    Stupid theory
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #8
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here's the updated version. It handles all form controls and has a few other fault tolerance measures. I also commented it
    Code:
    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!
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #9
    New to the CF scene
    Join Date
    Jun 2004
    Location
    New Hampshire
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Will this help with my post?

    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.


  •  

    Posting Permissions

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