How can I change the label text in 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​