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
– dreamweiver

2015-05-12 13:49:44 +00:00
Commented May 12, 2015 at 13:49 — dreamweiver
– dreamweiver, Commented May 12, 2015 at 13:49

DontVoteMeDown · Accepted Answer · 2015-05-12 13:58:59Z

2

You can use:

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

edited May 12, 2015 at 13:58

DontVoteMeDown

21.5k10 gold badges72 silver badges113 bronze badges

answered May 12, 2015 at 13:57

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dreamweiver Over a year ago

Never knew that was possible , but its not easy to understand for beginners :/

Jazi · Accepted Answer · 2015-05-12 13:54:04Z

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, 2015 at 13:54

answered May 12, 2015 at 13:50

Jazi

6,76215 gold badges64 silver badges94 bronze badges

5 Comments

vinod sahu Over a year ago

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

A. Wolff Over a year ago

@DontVoteMeDown Yes why, because it is valid to get input wrapped inside label

A. Wolff Over a year ago

@vinodsahu $taskTemplate.find(".task-manager label").contents().get(0).nodeValue = "M123:" would set it

DontVoteMeDown Over a year ago

@A.Wolff sure, you're right. I thought it was against the patterns.

Christian Lundahl Over a year ago

But the label won't work properly this way. The label needs a for attribute with the input's id.

halfer · Accepted Answer · 2020-05-16 21:36:43Z

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, 2020 at 21:36

halfer

20.2k20 gold badges111 silver badges208 bronze badges

answered May 12, 2015 at 13:54

dreamweiver

5,9922 gold badges27 silver badges39 bronze badges

5 Comments

Christian Lundahl Over a year ago

This doesn't work. The label needs a for attribute with the input's id.

dreamweiver Over a year ago

@Perplexor: your suggestion will obviously make it a better code, but OP never had this before either. anyway suggestion taken :)

Christian Lundahl Over a year ago

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.

dreamweiver Over a year ago

@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

Christian Lundahl Over a year ago

And that's exactly why I wrote my comment.

vinod sahu · Accepted Answer · 2015-05-12 14:05:09Z

0

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

this worked for :)

answered May 12, 2015 at 14:05

vinod sahu

6712 bronze badges

Collectives™ on Stack Overflow

How to modify label of input using JQuery

4 Answers 4

1 Comment

5 Comments

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

5 Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related