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

Question

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.

Answer 1

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);
    }
}

Answer 2

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());
    });
    });

Answer 3

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