CODEWITHSUNDEEP
javascriptjqueryajax
Mark
Mark

Reputation:

How to update span when text is entered in form text field with jquery

I would like a span to update when a value is entered into a text field using jquery. My form field has a text box with the name "userinput" and i have a span with the id "inputval". Any help would be greatly appreciated.

Upvotes: 5

Views: 5590

Answers (4)

Muhammad
Muhammad

Reputation: 31

Try the following, you have to call again keyup() to trigger for the last char:

$(".editable_input").keyup(function() { 
    var value = $(this).val();
    var test = $(this).parent().find(".editable_label");
    test.text(value);
}).keyup();

Upvotes: 2

eKek0
eKek0

Reputation: 23289

$(function() {
    $("input[name=userinput]").keydown(
      function() {
        $('#inputval').text(this.value);
      }
     )
})

Upvotes: 1

user434917
user434917

Reputation:

UPDATE: although you marked this as the correct answer, note that you should use the keyup event rather than the change event or the keydown 

$(document).ready(function() {
    $('input[name=userinput]').keyup(function() {
      $('#inputval').text($(this).val());
    });
    });

Upvotes: 10

TM.
TM.

Reputation: 111017

Try this. Be sure that you understand what is going on here.

// when the DOM is loaded:
$(document).ready(function() {
    // find the input element with name == 'userinput'
    // register an 'keydown' event handler
    $("input[name='userinput']").keydown(function() {
        // find the element with id == 'inputval'
        // fill it with text that matches the input elements value
        $('#inputval').text(this.value);
    }
}

Upvotes: 1

Related Questions