469,329 Members | 1,503 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,329 developers. It's quick & easy.

Input type label's value

how to set input type label's value through javascript

Mar 29 '07 #1
4 24243
On Mar 29, 1:08 am, "pradeep" <pwprad...@gmail.comwrote:
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

Mar 29 '07 #2
On Mar 29, 5:23 pm, "scripts.contact" <scripts.cont...@gmail.com>
wrote:
On Mar 29, 1:08 am, "pradeep" <pwprad...@gmail.comwrote:
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

Mar 29 '07 #3
On Mar 29, 3:29 am, "RobG" <r...@iinet.net.auwrote:
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 ?

Mar 29 '07 #4
On Mar 29, 9:41 pm, "scripts.contact" <scripts.cont...@gmail.com>
wrote:
On Mar 29, 3:29 am, "RobG" <r...@iinet.net.auwrote:
[...]
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

Mar 29 '07 #5

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

6 posts views Thread by Boyd Reilly | last post: by
5 posts views Thread by Mark Woodward | last post: by
1 post views Thread by spolsky | last post: by
4 posts views Thread by stevewy | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
reply views Thread by Purva khokhar | last post: by
reply views Thread by haryvincent176 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.