How to modify label of input using JQuery

Question

I have HTML like following :

<div class="task-manager">
    <label>Manager: <input type="text" value="" /></label>
</div>

I need to modify text of label Manager dynamically. I tried using JQUERY text method, but it replaces input type also.

$taskTemplate.find(".task-manager label").text("M123")

thats because your input tag is inside your label tag – dreamweiver May 12 '15 at 13:49 — dreamweiver, May 12 '15 at 13:49

score 2 · Accepted Answer · edited May 12 '15 at 13:58

2

You can use:

$taskTemplate.find(".task-manager label").contents().get(0).nodeValue = "M123:";

edited May 12 '15 at 13:58

DontVoteMeDown

21,122
10
69
105

answered May 12 '15 at 13:57

A. Wolff

74,033
9
94
155

1

Never knew that was possible , but its not easy to understand for beginners :/ – dreamweiver May 12 '15 at 13:59

Jazi · Answer 2 · 2015-05-12T13:54:04.527

1

You should change your HTML code, because <input> field is inside <label> and when you are changing value of this label, it's also overwriting and removing input form field:

<div class="task-manager">
    <label>Manager:</label> <input type="text" value="" />
</div>

edited May 12 '15 at 13:54

answered May 12 '15 at 13:50

Jazi

6,569
13
60
92

Is it not possible without changing HTML. I am able to get value using $taskTemplate.find(".task-manager label").contents().get(0).nodeValue, but can not modify it. thanks for help – vinod sahu May 12 '15 at 13:53
@DontVoteMeDown Yes why, because it is valid to get input wrapped inside label – A. Wolff May 12 '15 at 13:54
1

@vinodsahu $taskTemplate.find(".task-manager label").contents().get(0).nodeValue = "M123:" would set it – A. Wolff May 12 '15 at 13:54
@A.Wolff sure, [you're right](http://stackoverflow.com/q/774054/1267304). I thought it was against the patterns. – DontVoteMeDown May 12 '15 at 13:58
1

But the label won't work properly this way. The `label` needs a `for` attribute with the `input`'s id. – Christian Lundahl May 12 '15 at 14:04

score 1 · Answer 3 · edited May 16 '20 at 21:36

1

Just move the Input tag outside the label tag, because when your updating the text of your label, its erasing the content of label (which will obviously remove input tag inside it) , so change your code like this

HTML code:

<div class="task-manager">
   <label for="title">Manager:</label>
   <input type="text" id = 'title' value="" />
</div>

JS code:

    $('.task-manager label').text('Deputy Manager :');

Live Demo @ Jsfiddle: http://jsfiddle.net/dreamweiver/w6arp71x/

note/suggestion:for attribute added to label to bind the input to the label by default

edited May 16 '20 at 21:36

halfer

19,824
17
99
186

answered May 12 '15 at 13:54

dreamweiver

6,002
2
24
39

1

This doesn't work. The `label` needs a `for` attribute with the `input`'s id. – Christian Lundahl May 12 '15 at 14:03
@Perplexor: your suggestion will obviously make it a better code, but OP never had this before either. anyway suggestion taken :) – dreamweiver May 12 '15 at 14:12
But this suggestion changes other behaviours on the site. You can't just assume that OP is okay with that while it indeed will resolve his initial issue. – Christian Lundahl May 12 '15 at 14:14
@Perplexor: The First Rule on SO is not to intervene with OP's code which would change the entire behaviour, obviously any good notes can be suggested which could improve the code – dreamweiver May 12 '15 at 14:17
And that's exactly why I wrote my comment. – Christian Lundahl May 12 '15 at 14:40

score 0 · Answer 4 · answered May 12 '15 at 14:05

0

$taskTemplate.find(".task-manager label").contents().get(0).nodeValue = "M123:"

this worked for :)

answered May 12 '15 at 14:05

vinod sahu

67
12

How to modify label of input using JQuery

4 Answers4