Solved

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

Posted on 2009-04-14
6
4,180 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

 

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

WordPress Tutorial 2: Terminology

An important part of learning any new piece of software is understanding the terminology it uses. Thankfully WordPress uses fairly simple names for everything that make it easy to start using the software.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
Viewers will learn about basic arrays, how to declare them, and how to use them. Introduction and definition: Declare an array and cover the syntax of declaring them: Initialize every index in the created array: Example/Features of a basic arr…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

630 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