7 Replies - 551 Views - Last Post: 07 May 2013 - 09:02 PM

#1 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3541
  • View blog
  • Posts: 10,259
  • Joined: 08-June 10

<input> => <label>?

Posted 07 May 2013 - 01:53 PM

Hi there,

does anyone know, whether it is possible to programmatically get from a form control element to its referring label element? (I know that the opposite is quite easy)

Dormi
Is This A Good Question/Topic? 0
  • +

Replies To: <input> => <label>?

#2 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3526
  • View blog
  • Posts: 12,034
  • Joined: 12-December 12

Re: <input> => <label>?

Posted 07 May 2013 - 02:02 PM

I don't think you could get the label by (direct) association with the control, so I would go:

control > (parent) .form > getElementsByTagName('label')

then loop through examining the 'for' attribute.

Of course, if you are constructing the page yourself then you could give the label an id based on the control's id.

I suspect that you've already considered these options :)

This post has been edited by andrewsw: 07 May 2013 - 02:05 PM

Was This Post Helpful? 0
  • +
  • -

#3 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3541
  • View blog
  • Posts: 10,259
  • Joined: 08-June 10

Re: <input> => <label>?

Posted 07 May 2013 - 02:04 PM

that’s really a pity that you can’t access the #IDREF through the #ID.

This post has been edited by Dormilich: 07 May 2013 - 02:04 PM

Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3526
  • View blog
  • Posts: 12,034
  • Joined: 12-December 12

Re: <input> => <label>?

Posted 07 May 2013 - 02:16 PM

View PostDormilich, on 07 May 2013 - 09:04 PM, said:

thatís really a pity that you canít access the #IDREF through the #ID.

querySelector is supported by modern browsers:

var theLabel = formReference.querySelector("label[for='" + id + "']");

Was This Post Helpful? 0
  • +
  • -

#5 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3541
  • View blog
  • Posts: 10,259
  • Joined: 08-June 10

Re: <input> => <label>?

Posted 07 May 2013 - 02:26 PM

hm, thatís probably the best we can get our hands at.
Was This Post Helpful? 0
  • +
  • -

#6 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3526
  • View blog
  • Posts: 12,034
  • Joined: 12-December 12

Re: <input> => <label>?

Posted 07 May 2013 - 02:36 PM

View PostDormilich, on 07 May 2013 - 09:26 PM, said:

hm, thatís probably the best we can get our hands at.

You are welcome..
Was This Post Helpful? 0
  • +
  • -

#7 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3719
  • View blog
  • Posts: 5,991
  • Joined: 08-June 10

Re: <input> => <label>?

Posted 07 May 2013 - 03:14 PM

Maybe I'm just being thick at the moment, but I'm not quite getting the problem here. A <label> is only associated with a <input> if it's either: 1) A direct parent of the <input> or, 2) If it's "for" attribute references the "id" of the <input>.

So the way I'm seeing this, this would do fine for finding any <input> element's <label> element:
function getInputLabel(inputElement) {
    // Look for parent <label> elements.
    var current = inputElement;
    while (current && current != document.body) {
        if (current.nodeName.toUpperCase() == "LABEL") {
            return current;
        }
        current = current.parentNode;
    }

    // Look for <label> elements that reference the <input> ID.
    var theID = inputElement.getAttribute("id");
    if (typeof theID == "string" && theID.length > 0) {
        // For compatibility, avoiding query selectors.
        var labels = document.getElementsByTagName("label");
        for (var i = 0; i < labels.length; ++i) {
            if (labels[i].getAttribute("for") == theID) {
                return labels[i];
            }
        }
    }

    // Nope, no valid label found.
    return null;
}



Am I missing something?
Was This Post Helpful? 0
  • +
  • -

#8 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3541
  • View blog
  • Posts: 10,259
  • Joined: 08-June 10

Re: <input> => <label>?

Posted 07 May 2013 - 09:02 PM

View PostAtli, on 08 May 2013 - 12:14 AM, said:

Am I missing something?

technically, no. but it is (obviously) far easier to get from the label to the input than vice versa.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1