By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,853 Members | 1,034 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,853 IT Pros & Developers. It's quick & easy.

Deriving Element Names from associated Labels

P: n/a
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.

Thanks All,
Martin

<html>
<head>
<script>
function abc(form_name)
{
// Pseudo Code

Search form to find the Label "Country"
Derived 'For' value. i.e. <label for = "N50"

Re-search form to find an id matching the previously found for value
i.e. search form where id for form element= "N50" <select id="N50"
Return name of form element i.e. HrAddressFlex0
}
</script>
</head>
<body>
<form id="DefaultFormName" name="DefaultFormName" method="POST"
action="www.dummyurl.com">
<table>
<tr>
<td align="right" nowrap>
<label for="N50">Country</label>
</td>
<td nowrap>
<select id="N50" name="HrAddressFlex0">
<option value="AFG">Afghanistan</option>
<option value="ALB">Albania</option>
<option value="ALG">Algeria</option>
</select>
</td>
</tr>
<tr>
<td align="right" nowrap></td><td>
<input type="button" name="submit_button" value="submit"
onclick="abc(this.form)">
</td>
<tr>
</table>
</form>
</body>
</html>
Jul 20 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
Martin O'Rourke <Ma************@oracle.com> writes:
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="???" .... the only constant I have is knowing that it will be labelled up
"Country".


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.getElementsByTagName("label");
for (var i=0;i<labels.length;i++) {
if (labels[i].firstChild.nodeValue.match(/^\s*Country\s*$/)) {
return document.getElementById(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
"getElementsByTagName", "getElementById" and "firstChild" doesn't
exist.

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

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

P: n/a


Martin O'Rourke wrote:
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.


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.tags('label');
}
else if (document.getElementsByTagName) {
labels = document.getElementsByTagName('label');
}
if (labels) {
var labelText, label;
for (var i = 0; i < labels.length; i++) {
label = labels[i];
labelText = getInnerText(label);
if (labelText == labelContent) {
var selectId = label.htmlFor;
var select;
if (document.all) {
select = document.all[selectId];
}
else if (document.getElementById) {
select = document.getElementById(selectId);
}
if (select) {
var value = select.options[select.selectedIndex].value;
var text = select.options[select.selectedIndex].text;
alert('value: ' + value + '; text: ' + text);
}
break;
}
}
}
}

function getInnerText (element) {
if (typeof element.innerText != 'undefined') {
return element.innerText;
}
else if (document.createRange) {
var range = document.createRange();
range.selectNodeContents(element);
return range.toString();
}
}
</script>
</head>
<body>
<form id="DefaultFormName" name="DefaultFormName" method="POST"
action="www.dummyurl.com">
<table>
<tr>
<td align="right" nowrap>
<label for="N50">Country</label>
</td>
<td nowrap>
<select id="N50" name="HrAddressFlex0">
<option value="AFG">Afghanistan</option>
<option value="ALB">Albania</option>
<option value="ALG">Algeria</option>
</select>
</td>
</tr>
<tr>
<td align="right" nowrap></td><td>
<input type="button" name="submit_button" value="submit"
onclick="getCountry('Country')">
</td>
<tr>
</table>
</form>
</body>
</html>

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

--

Martin Honnen
http://JavaScript.FAQTs.com/

Jul 20 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.