Deriving Element Names from associated Labels

**Lasse Reichstein Nielsen** · Jul 20 '05, 09:30 AM

Re: Deriving Element Names from associated Labels

Martin O'Rourke <Martin.ORourke @oracle.com> writes:
[color=blue]
> I am hoping someone might be able to put me out of my misery and let me
> know if it is possible or not to dervie the name of an element in a
> form, based on its associated label, only knowing the value of the
> label, and working on the assumption that the <label for="???" links to
> the <select id="???"[/color]
....[color=blue]
> the only constant I have is knowing that it will be labelled up
> "Country".[/color]

Are you sure even the HrAddressFlex0 is unguessable? Even in part ...
if you know it's always "??AddressFlex< number>", or something else that
is sufficiently unique, then it is easier going for the select element
directly.

Anyway:
---
<script type="text/javascript">
function findCountry() {
var labels = document.getEle mentsByTagName( "label");
for (var i=0;i<labels.le ngth;i++) {
if (labels[i].firstChild.nod eValue.match(/^\s*Country\s*$/)) {
return document.getEle mentById(labels[i].htmlFor);
}
}
}
</script>
---

Tested in IE6, Mozilla and Opera 7. If you want to adapt it for
earlier IE's, you will want to add extra cases for when
"getElementsByT agName", "getElementById " and "firstChild " doesn't
exist.

In IE4, these can be emulated by "document.all.t ags['label']",
"document.a ll[id]" and ".innerText ", but it will double the size of
the functio.

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit. html>
'Faith without judgement merely degrades the spirit divine.'

**Martin Honnen** · Jul 20 '05, 09:30 AM

Re: Deriving Element Names from associated Labels

Martin O'Rourke wrote:[color=blue]
> All,
>
> I am hoping someone might be able to put me out of my misery and let me
> know if it is possible or not to dervie the name of an element in a
> form, based on its associated label, only knowing the value of the
> label, and working on the assumption that the <label for="???" links to
> the <select id="???"
>
> Below is the html that I am working from, which has been dynamically
> created. Unfortunately I have no control over this at all. I need to
> obtain the name of the drop down, so I can derive the country code
> (.value) and the country name (.text) but the only constant I have is
> knowing that it will be labelled up "Country".
>
> Below is the HTML I am seeing along with the Pseduo code I think I will
> need to implement. I have
> removed my JavaScript effort to save embarressment on my part.
>
> If anyone can help, provide code, or point me in the right direction
> then I would really appreciate it.
>[/color]

Here is a solution that searches the document for a <label> element with
content Country, then looks for the appropriate select element and
outputs its value/text

<html>
<head>
<script>
function getCountry (labelContent) {
var labels;
if (document.all) {
labels = document.all.ta gs('label');
}
else if (document.getEl ementsByTagName ) {
labels = document.getEle mentsByTagName( 'label');
}
if (labels) {
var labelText, label;
for (var i = 0; i < labels.length; i++) {
label = labels[i];
labelText = getInnerText(la bel);
if (labelText == labelContent) {
var selectId = label.htmlFor;
var select;
if (document.all) {
select = document.all[selectId];
}
else if (document.getEl ementById) {
select = document.getEle mentById(select Id);
}
if (select) {
var value = select.options[select.selected Index].value;
var text = select.options[select.selected Index].text;
alert('value: ' + value + '; text: ' + text);
}
break;
}
}
}
}

function getInnerText (element) {
if (typeof element.innerTe xt != 'undefined') {
return element.innerTe xt;
}
else if (document.creat eRange) {
var range = document.create Range();
range.selectNod eContents(eleme nt);
return range.toString( );
}
}
</script>
</head>
<body>
<form id="DefaultForm Name" name="DefaultFo rmName" method="POST"
action="www.dum myurl.com">
<table>
<tr>
<td align="right" nowrap>
<label for="N50">Count ry</label>
</td>
<td nowrap>
<select id="N50" name="HrAddress Flex0">
<option value="AFG">Afg hanistan</option>
<option value="ALB">Alb ania</option>
<option value="ALG">Alg eria</option>
</select>
</td>
</tr>
<tr>
<td align="right" nowrap></td><td>
<input type="button" name="submit_bu tton" value="submit"
onclick="getCou ntry('Country') ">
</td>
<tr>
</table>
</form>
</body>
</html>

Works with IE4+, Netscape 6+ and at least Opera 7

--

Martin Honnen

Attention Required! | Cloudflare

http://JavaScript.FAQTs.com/

Deriving Element Names from associated Labels

Deriving Element Names from associated Labels

Comment

Comment