HTML - Bind textinput to label

Question

Quick question;

I have a form with inputs (textarea, select, and edit), and I want to mirror what I write into these. I want to bind the data I type here to other fields, just for visual confirmation.

I'm using this to create a small internal ToDo HTML webpage, and when you add a new task, I want the inputs to be reflected on a "preview" task above the input fields.

Any way to do this? Either HTML, Javascript or PHP?

Thanks in advance =)

Answer 1

Since you have not specifically asked for jQuery solution, here is one in plain javascript:

Let's assume that you have textarea and div, and you want to copy from textarea to div in realtime (same procedure is applicable to any other element in which you can type).

Html is this:

<textarea name="test" onkeyup="copyData(this,'copytarget')"></textarea>
<div id="copytarget"></div>

Then javascript is this:

function copyData(el, targ) {
  document.getElementById(targ).innerHTML = el.value;
}

This simply copies everything typed into textarea every time you lift a finger off the key on your keyboard.

Answer 2

One option, using jQuery:

$(':input').change(function(){
    $('label[for="' + this.id + '"]').text('Label for "' + this.id + '" value: ' + this.value);
});

JS Fiddle demo.

In plain JavaScript (belatedly):

function updateLabel (){
    var label = this.labels[0],
        textProp = 'textContent' in document ? 'textContent' : 'innerText';
    label[textProp] = 'Element value: ' + this.value;
}

var inputTypeElems = document.querySelectorAll('input, select, textarea');

[].forEach.call(inputTypeElems, function(a){
    a.addEventListener('change', updateLabel);
});

And to offer a more responsive approach:

function updateLabel (){
    var label = this.labels[0],
        textProp = 'textContent' in document ? 'textContent' : 'innerText';
    label[textProp] = 'Element value: ' + this.value;
}

var inputTypeElems = document.querySelectorAll('input, select, textarea');

[].forEach.call(inputTypeElems, function(a){
    var evtName;
    switch (a.tagName.toLowerCase()){
        case 'input':
        case 'textarea':
            evtName = 'keyup';
            break;
        default:
            evtName = 'change';
    }
    a.addEventListener(evtName, updateLabel);
});

JS Fiddle demo.

References:

• Plain JavaScript:
  • Array.prototype.forEach().
  • document.querySelectorAll().
  • EventTarget.addEventListener().
• jQuery:
  • Attribute-equals ([attribute="value"]) selector.
  • change().
  • text().

Answer 3

you can simple use key up function with jQUery

$("#textBox").keyup(function(){
   $("#message").val($(this).val());
});

See the fiddle

Answer 4

Use change event on input fields.

$('input, texarea').change(function(){
    $('#previewFor' + $(this).attr('id')).text( $(this).val() );
});

$('select').change(function(){
    $('#previewFor' + $(this).attr('id')).text( $('option:selected', this).text() );
});

Answer 5

insert into you html page

<script>

    var inputTextHandler = function(){

      // you input 
      var MyTextInput = $("#MyTextInput");

      // set listener to yurs input
      MyTextInput.change(function(){
        // curren text of input field
        var newText = this.val();
        // set this text to prewie block
        $("#MyTextPrewie").val(newText);
      });

    }

    // run you handler
    inputTextHandler();

</script>

<input id="MyTextInput"></input>
<input id="MyTextPrewie"></input>