CODEWITHSUNDEEP
javascriptjqueryhtml
vinod sahu
vinod sahu

Reputation: 67

How to modify label of input using JQuery

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")

Upvotes: 1

Views: 1263

Answers (4)

dreamweiver
dreamweiver

Reputation: 6002

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

Upvotes: 1

vinod sahu
vinod sahu

Reputation: 67

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

this worked for :)

Upvotes: 0

A. Wolff
A. Wolff

Reputation: 74420

You can use: 

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

Upvotes: 2

Jazi
Jazi

Reputation: 6712

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>

Upvotes: 1

Related Questions