如何在jQuery中更改标签文本？

Question

I have a textbox and a label. If the user wants to change the label text, he/she would have to enter the text in the textbox. How can I update the label text every time a user makes an entry in the textbox on change?

I know it is possible using AJAX with jQuery and PHP. Is there an easier way? Please let me know. Here is my code and a link: http://jsfiddle.net/uQ54g/1/

$('#change1').change(function(){
    var l = $(this).val();
    $('label').replaceWith(l);


});

Answer 1

First of all, you have to use .text or .html to set the text within a label in jquery. Your current code will actually remove the label element and replace with just text. Therefore, it will no longer work if you try to edit the value again. You also may want to add a class or an id to your label because most likely you will have more than one label on a page.

HTML:

<input type="text" id="change1"/><br/>
<label id="test">Hello</label>

Javascript:

$('#change1').change(function(){
    var l = $(this).val();
    $('#test').text(l);
    // OR $('#test').html(l);
});

If you are wanting to change the label after every character entered you will need to use keyup instead of change .

Here is an updated jsfiddle​

Answer 2

The code in you fiddle is working fine as i mentioned in the comments, or you can use keyup like

$('#change1').keyup(function(){
var l = $(this).val();
$('label').text(l);
//alert($('#change1').val())
});

http://jsfiddle.net/uQ54g/4/

also note that when you use replaceWith it will replace the matched element, in your case it label after the change is triggered the <label>hello</label> will be replace with Changed Text so if you do $("label") again it will return you undefined, see it for yourself

Answer 3

try this:

$('#change1').keyup(function(){
l=$(this).val()
$('label').html(l)
})

Answer 4

use this with jquery library

$('#change1').on('keyup',function(){ //Change1 is id of textbox
   $('#label1').html($(this).val()) //label1 is the id of the label
});
$('#change1').blur(function() { //if we copy paste some text into the textbox it will also work if use this blur and trigger function
   $(this).trigger('keyup');
});

Answer 5

How about this

$('#change1').change(function(item){
     $('label').text(item.target.value);
});