Solved

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

Posted on 2009-04-14
6
3,944 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
PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

 

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

Optimizing Cloud Backup for Low Bandwidth

With cloud storage prices going down a growing number of SMBs start to use it for backup storage. Unfortunately, business data volume rarely fits the average Internet speed. This article provides an overview of main Internet speed challenges and reveals backup best practices.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
How to dynamically load/unload User control in ASP.net page? 2 180
I starting with php 12 133
Re-position sub-options beneath the TAB 7 90
Adjust the position 3 60
Article by: Matthew
I am a very big proponent of technology compliance standards and strive to meet such criteria in all of my work. That includes my site, which is 100% XHTML 1.0 compliant as determined by the World Wide Web Consortium. https://www.matthewstevenkel…
There are two main kinds of selectors in CSS: One is base selector like h1, h2, body, table or any existing HTML tags.  For instance, the following rule sets all paragraphs (<p> elements) to red: (CODE) CSS also allows us to define our own custom …
The viewer will learn how to dynamically set the form action using jQuery.
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…

809 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