Solved

How to get the <label> id from for attribute in JavaScript

Posted on 2009-04-14
6
3,892 Views
Last Modified: 2013-11-19
In the below code I am having the id of the input type=checkbox, that is "for" attribute of the label and I wanted to get the id of the label dynamically.
I know that from label id I can get the label content.
Can anybody sugest me how to get the id from for value of the <label>.

<html>

<head>

<script type="text/javascript">

function get_label() {

	alert(document.getElementById('labelId').firstChild.nodeValue);

}

</script>

</head>

<body>

<label id="labelId" for="check_id">check box 1: </label>

<input type="checkbox" name="check_name" id="check_id" />

<input type="button" value="click me" onclick="get_label()" />

</body>

</html>

Open in new window

0
Comment
Question by:parumuga
6 Comments
 
LVL 9

Accepted Solution

by:
Sreedhar Vengala earned 500 total points
ID: 24145363
if your : html is  as :

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<script type="text/javascript">
    function get_label() {
        alert(document.getElementById('labelId').firstChild.nodeValue);
    }
</script>
</head>
<body>
<form id = "form1">
<label id="labelId" type="label">check box 1: </label>
<input type="checkbox" name="check_name" id="check_id" />
<input type="button" value="click me" onclick="get_label()" />
</form>
</body>
</html>

can be doable (not tested)

as :

var myForm=document.forms["form1"]

for(var i=0;i<myForm.length;i++)
{

        if(myForm.elements[i].type=="label"
        &&
        myForm.elements[i].value=="check box 1")
        {
           var currentID=myForm.elements[i].id
        }

}
alert(currentID);



0
 
LVL 42

Expert Comment

by:David S.
ID: 24145376
Is this what you're asking for?
function get_label() {

        alert(document.getElementById('labelId').htmlFor);

}

Open in new window

0
 
LVL 9

Expert Comment

by:dan_neal
ID: 24147690
Try this:

function get_label {

var labels = document.documentElement.getElementsByTagName('label');

for(var i=0;i<labels.length;i++) {

if(labels.item(i).getAttribute('for')==checkbox_id) {

alert(labels.item(i).innerHTML);}

}

}

Open in new window

0
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 

Author Comment

by:parumuga
ID: 24174346
this is the result I was expecting. This is how I get the Label ID thanks for Your answers especially for Kravimir.
function getHtmlLabelId(div_obj,element_id){

for (i=0; i<div_obj.getElementsByTagName("label").length; i++) {

 if(div_obj.getElementsByTagName("label")[i].htmlFor == element_id)

  return (div_obj.getElementsByTagName("label")[i].id);

}

}

Open in new window

0
 
LVL 42

Expert Comment

by:David S.
ID: 24180766
You're welcome.

It's more efficient to only do one DOM lookup and to only calculate the length once:
function getHtmlLabelId(div_obj,element_id){

  var lbls = div_obj.getElementsByTagName("label");

  for (var i=0,k=lbls.length; i<k; i++) {

     if(lbls[i].htmlFor == element_id)

       return lbls[i].id;

  }

  return '';

}

Open in new window

0
 

Author Closing Comment

by:parumuga
ID: 31570295
Solution was useful
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL (http://www.experts-exchange.com/articles/201/Handling-Date-and-Time-in-PHP-and-MySQL.html) several years ago, it seemed like now was a good time to updat…
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Viewers will learn one way to get user input in Java. Introduce the Scanner object: Declare the variable that stores the user input: An example prompting the user for input: Methods you need to invoke in order to properly get  user input:
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now