Find html label associated with a given input

Question

Let's say I have an html form. Each input/select/textarea will have a corresponding <label> with the for attribute set to the id of it's companion.

Given an input element in javascript --via an onkeyup event, for example--, what's the best way to find it's associated label?

Answer 1

have you tried using document.getElementbyID('id') where id is the id of the label or is the situation that you dont know which one you are looking for

Answer 2

Earlier...

var labels = document.getElementsByTagName("LABEL");
var lookup = {};
for (var i = 0; i < labels.length; i++);
{
  lookup[labels[i].htmlFor] = label;
}

Later...

var myLabel = lookup[myInput.id];

Snarky comment: Yes, you can also do it with JQuery. :-)

Answer 3

If you are using jQuery you can do something like this

$('label[for="foo"]').hide ();

If you aren't using jQuery you'll have to search for the label. Here is a function that takes the element as an argument and returns the associated label

function findLableForControl(el) {
   var idVal = el.id;
   labels = document.getelementsByTagName('label');
   for( var i = 0; i < labels.length; i++ ) {
      if (labels[i].htmlFor == idVal)
           return labels[i];
   }
}

Answer 4

with jquery you could do something like

var nameOfLabel = someInput.attr('id');
var label = $("label[for='+nameOfLabel+']");

Answer 5

First, scan the page for labels, and assign a reference to the label from the actual form element:

var labels = document.getElementsByTagName('LABEL');
for (var i = 0; i < labels.length; i++) {
    if (labels[i].htmlFor != '') {
         var elem = document.getElementById(labels[i].htmlFor);
         if (elem)
            elem.label = labels[i];   
    }
}

Then, you can simply go:

document.getElementById('MyFormElem').label.innerHTML = 'Look ma this works!';

No need for a lookup array :)