Deriving Element Names from associated Labels

  • Thread starter Martin O'Rourke
  • Start date
M

Martin O'Rourke

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>
 
L

Lasse Reichstein Nielsen

Martin O'Rourke said:
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".
Click to expand...

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.firstChild.nodeValue.match(/^\s*Country\s*$/)) {
return document.getElementById(labels.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
 
M

Martin Honnen

Martin said:
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.
Click to expand...

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;
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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

HCaptcha - How to stop page from refreshing on submit if captcha is not checked/validated 1
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
How can I create a table using the input element? 1
Script to send email not working 1
I dont get this. Please help me!! 2
Filter table rows based on multiple checkboxes value 2
action_page.php form 2
How to display input options only after selecting an option from the 'select class' tag JS? 6

Members online

Total: 26 (members: 1, guests: 25)
Robots: 112

Forum statistics

Threads
473,777
Messages
2,569,604
Members
45,212
Latest member
BrennaCaba

Latest Threads

Top