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.