Getting text from LABEL

[tdrew]

A dropdown on my site calls an "onchange" function. I would like the function to select a checkbox for "Top Brands" (as seen below).

Can I find the text "Top Brands" between label tags and then find the 'for' attribute and then check the correct checkbox?

The difficulty is that the array of checkboxes is dynamic. It might not always be the same id. That is why I need to find "Top Brands" between the label tags.

================================================

<table cellspacing="1" cellpadding="1" border="0" class="radiobuttonlist" id="chkAllCatList">
<tbody>
<tr>
<td>
<input type="checkbox" name="chkAllCatList$0" id="chkAllCatList_0">
<label for="chkAllCatList_0">Boys ~ 0 -3 Months</label>
</td>
</tr>
...
<tr>
<td>
<input type="checkbox" name="chkAllCatList$215" id="chkAllCatList_215">
<label for="chkAllCatList_215">Top Brands</label>
</td>
/tr>

 

[feherke]

Hi

I do not understand your goal, so I made up a new one : let us change the color of the checked [tt]checkbox[/tt]es to red. I hope the implementation will show you some possibilities :

[b]<input[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"checkbox"[/i][/green] [maroon]name[/maroon][teal]=[/teal][green][i]"chkAllCatList$0"[/i][/green] [maroon]id[/maroon][teal]=[/teal][green][i]"chkAllCatList_0"[/i][/green] [maroon]onchange[/maroon][teal]=[/teal][green][i]"markmylabel(this)"[/i][/green][b]>[/b]
[b]<label[/b] [maroon]for[/maroon][teal]=[/teal][green][i]"chkAllCatList_0"[/i][/green][b]>[/b]Boys ~ 0 -3 Months[b]</label>[/b]
[b]<input[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"checkbox"[/i][/green] [maroon]name[/maroon][teal]=[/teal][green][i]"chkAllCatList$215"[/i][/green] [maroon]id[/maroon][teal]=[/teal][green][i]"chkAllCatList_215"[/i][/green] [maroon]onchange[/maroon][teal]=[/teal][green][i]"markmylabel(this)"[/i][/green][b]>[/b]
[b]<label[/b] [maroon]for[/maroon][teal]=[/teal][green][i]"chkAllCatList_215"[/i][/green][b]>[/b]Top Brands[b]</label>[/b]

[b]function[/b] [COLOR=darkgoldenrod]markmylabel[/color][teal]([/teal]what[teal])[/teal]
[teal]{[/teal]
  document[teal].[/teal][COLOR=darkgoldenrod]querySelector[/color][teal]([/teal][green][i]'label[for="'[/i][/green][teal]+[/teal]what[teal].[/teal]id[teal]+[/teal][green][i]'"]'[/i][/green][teal]).[/teal]style[teal].[/teal]color[teal]=[/teal]what[teal].[/teal]checked[teal]?[/teal][green][i]'red'[/i][/green][teal]:[/teal][green][i]''[/i][/green]
[teal]}[/teal]

[gray]// or[/gray]

[b]function[/b] [COLOR=darkgoldenrod]markmylabel[/color][teal]([/teal]what[teal])[/teal]
[teal]{[/teal]
  document[teal].[/teal][COLOR=darkgoldenrod]evaluate[/color][teal]([/teal][green][i]'//label[@for="'[/i][/green][teal]+[/teal]what[teal].[/teal]id[teal]+[/teal][green][i]'"]'[/i][/green][teal],[/teal]document[teal],[/teal][b]null[/b][teal],[/teal]XPathResult[teal].[/teal]ANY_UNORDERED_NODE_TYPE[teal],[/teal][b]null[/b][teal]).[/teal]singleNodeValue[teal].[/teal]style[teal].[/teal]color[teal]=[/teal]what[teal].[/teal]checked[teal]?[/teal][green][i]'red'[/i][/green][teal]:[/teal][green][i]''[/i][/green]
[teal]}[/teal]

Both solutions works in Gecko, Presto and WebKit, none works in KHTML, none tested in Trident. Note that using a JavaScript library would improve the code's portability.

Feherke.

http://free.rootshell.be/~feherke/

 

[tdrew]

Thank you for the reply. I will try to ask using your example..

*** More background ***
My list of checkboxes is created for values in a batabase. Depending on the query there might be 10 checkboxes and their might be 100.

Apparently, the program gets the values from a database, puts them into an array, and then builds the checkboxes from the array.

So, "Top Brands" is not always the same ID.

*** Your example ***
In your example I would not know <label for="chkAllCatList_215> is actually the label for "Top Brands".

Is there any way to find out the "for=xxxxx" for the string "Top Brands"?

 

[vacunita]

How about you get the list of labels using JS, and then search them for the string you want: 'Top Brands'

something simple like this should work:

function get_Chkbox_ID(){

 var elems=document.getElementsByTagName('label');
[green]//Get all label elements [/green]
 var srch='Top Brands';
[green]//set value to search for[/green]
 for(var i=0;i<=elems.length-1;i++){
[green]//loop through all labels[/green]
  if(elems[i].innerHTML==srch){
[green]//check for searhc string[/green]
    alert(elems[i].getAttribute('for'));
[green]//Alert out for attribute which contains ID for the checkbox in question. [/green]
  }

 }

}

If its possible that more than one label will have the same string, then you may need to save them in an additional array, and check which one references a checkbox.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[tdrew]

That is genius. Thank you! I idn't know about the innerHTML property.

 

[vacunita]

Most tags have the innerHTML property. Makes it easy to get, and set their contents.




----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[tdrew]

One more quick question....

<script type="text/javascript">
function chk_TopBrandCat(val) {
if (val != 0) {
get_Chkbox_ID("Top Brands");}}

function get_Chkbox_ID(inHTML){
alert(inHTML);
var elems=document.getElementsByTagName('label');
for(var i=0;i<=elems.length-1;i++){
if(elems.innerHTML==inHTML){
var match = elems.getAttribute('for');
document.form1.[match].checked = true;}}
}
</script>

When I find out the checkbox name for "Top Brands" how do I make sure it gets checked?

if(elems.innerHTML==inHTML){
var match = elems.getAttribute('for');
document.form1.[match].checked = true;}}

I know the [match] part is wrong but I can't figure out what to change it to. I have been trying to google an answer but I don't even know what to search.

 

[tdrew]

Figured it out...
eval("document.form1." + match + ".checked = true;");}}

Thank you again for the help!

 

[feherke]

Hi

So "Top Brands" is given and you want to find out "chkAllCatList_215". Got it now.

Do it as Phil suggested, I post this here just as an alternative :

[b]var[/b] forId[teal]=[/teal]document[teal].[/teal][COLOR=darkgoldenrod]evaluate[/color][teal]([/teal][green][i]'//label[text()="Top Brands"]/@for'[/i][/green][teal],[/teal]document[teal],[/teal][b]null[/b][teal],[/teal]XPathResult[teal].[/teal]STRING_TYPE[teal],[/teal][b]null[/b][teal]).[/teal]stringValue

document.form1.[match].checked = true;
eval("document.form1." + match + ".checked = true;");

Both are wrong. That way you can reference an element by [tt]name[/tt], but you have its [tt]id[/tt].

document[teal].[/teal][COLOR=darkgoldenrod]getElementById[/color][teal]([/teal]match[teal]).[/teal]checked [teal]=[/teal] [b]true[/b]

Feherke.

http://free.rootshell.be/~feherke/

 

[vacunita]

Feherke is correct, you are attempting to use an ID in a reference that expects a name. It may work in IE, but don't expect it to work in any other browser. Do as feherke suggests, and use the getElementById method.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.