Input type label's value

[pradeep]

how to set input type label's value through javascript

[scripts.contact]

On Mar 29, 1:08 am, "pradeep" <[e-mail]:

how to set input type label's value through javascript

assuming "in" is input element and "newVal" is new value for label.

var labels=document.getElementsByTagName("label"),i;
for( i=0; i<labels.length;i++ )
if(labels[i].htmlFor==in.id)labels[i].innerHTML=newVal
--
will be easy if you just set an id on label and the use getElementById

[RobG]

On Mar 29, 5:23 pm, "scripts.contact" <[e-mail]>
wrote:

On Mar 29, 1:08 am, "pradeep" <[e-mail]:

how to set input type label's value through javascript

assuming "in" is input element and "newVal" is new value for label.

Javascript has an "in" operator, so not a good choice for a local
variable.

The W3C HTML specification doesn't define a value attribute for label
elements, so assigning a value attribute to a label and giving it a
value may be unreliable for whatever (undisclosed) purpose the OP has
in mind.

>
var labels=document.getElementsByTagName("label"),i;
for( i=0; i<labels.length;i++ )
if(labels[i].htmlFor==in.id)labels[i].innerHTML=newVal

The for attribute is not mandatory, the label can be related to an
input by being its parent:

<label><input ... ></label>

is quite valid, though IE doesn't correctly associate the label with
the input so not recommended.

will be easy if you just set an id on label and the use getElementById

I guess you're suggesting something like a scheme that assigns a label
id which is the same as the input id or name with a prefix of "label",
e.g.:

<label id="label_i01"><input name="i01"></label>

Then the label id can be used to find the input id or name and hence
get a reference to the appropriate element. However, also be aware
that a label can be associated with more than one control, any
solution should accommodate that.
--
Rob

[scripts.contact]

On Mar 29, 3:29 am, "RobG" <[e-mail]:

var labels=document.getElementsByTagName("label"),i;
for( i=0; i<labels.length;i++ )
if(labels[i].htmlFor==in.id)labels[i].innerHTML=newVal

The for attribute is not mandatory, the label can be related to an
input by being its parent:

so this should work-
function getLabel(iElem){
if(/label/i.test(iElem.parentElement.tagName))
return iElem.parentElement
var labels=document.getElementsByTagName("label"),i;
for( i=0; i<labels.length;i++ ){
if(labels[i].htmlFor==iElem.id)
return labels[i]
}
return false
}

will be easy if you just set an id on label and the use getElementById

I guess you're suggesting something like a scheme that assigns a label
id which is the same as the input id or name with a prefix of "label",
e.g.:

<label id="label_i01"><input name="i01"></label>

Then the label id can be used to find the input id or name and hence
get a reference to the appropriate element.

yes.

However, also be aware
that a label can be associated with more than one control, any
solution should accommodate that.

How ? like this :

<label >
Name : <input type="text">
Pass : <input type="password">
</label>

but it will work for first control only, right ?

[RobG]

On Mar 29, 9:41 pm, "scripts.contact" <[e-mail]>
wrote:

On Mar 29, 3:29 am, "RobG" <[e-mail]:

[...]

However, also be aware
that a label can be associated with more than one control, any
solution should accommodate that.

How ? like this :

<label >
Name : <input type="text">
Pass : <input type="password">
</label>

Yes.

>
but it will work for first control only, right ?

Clicking on the second control should put focus on the first. I
should also have said that the for attribute associates a label with
exactly one control, but that a control can have more than one label -
I assume so you can layout forms without splitting labels over block
elements, e.g. (wrapped for posting):

<form action="">
<table>
<tr>
<td style="text-align:right;"><label
for="foo">Ipsum</label></td>
<td><label for="foo">Lorem</label></td>
<td><input type="text" id="foo" name="foo"></td>
</tr>
<tr>
<td style="text-align:right;"><label
for="bar">sequestor</label></td>
<td><label for="bar">ce</label></td>
<td><input type="text" id="bar" name="bar"></td>
</tr>
<tr>
<td colspan="3"><label>Multi<input name="b1">
<input name="b2"></label></td>
</tr>
</table>
</form>
Probably a bad example, but hopefully it does the job - it "works" in
Firefox, can't say what IE will make of it. Probably best to follow-
up in an HTML group. :-)
--
Rob