Solved

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

Posted on 2009-04-14
6
4,037 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
PHP email variable syntax 3 53
My first jQuery plugin: is the right tutorial missing? 2 109
jQuery Date picker not working 16 217
Question on web subscription for apps 3 117
Preface This article introduces an authentication and authorization system for a website.  It is understood by the author and the project contributors that there is no such thing as a "one size fits all" system.  That being said, there is a certa…
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

680 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