html - Dynamically displaying input values using Javascript -

i have form, , want dynamically display elements of form filled out.

imagine if had text input name. type, want name appear in different part of webpage.

how accomplish in simplest manner?

(see below update, realized later i'd forgotten handle pasting text field using mouse action.)

you can hook keypress event (you'll want keydown , keyup well) on text input field , use trigger update of dom element elsewhere. instance:

var namefield = document.getelementbyid('namefield'); namefield.onkeydown = updatenamedisplay; namefield.onkeyup = updatenamedisplay; namefield.onkeypress = updatenamedisplay; function updatenamedisplay() {     document.getelementbyid('namedisplay').innerhtml = this.value || "??"; } 

live example

that's basic example using dom0-style event handler (the "onxyz" property, don't like). simplest way these things use library jquery, prototype, yui, closure, or any of several others. they'll smooth on browser differences , let focus on you're trying do.

here's above using jquery:

$('#namefield').bind('keydown keyup keypress', function() {     $('#namedisplay').html(this.value || "??"); }); 

live example

---

update: actually, above miss things pasting field using mouse. you'd think change handler this, doesn't fire until focus leaves field, it's not uncommon use timed process this:

javascript, no library:

var namefield = document.getelementbyid('namefield'); var lastnamevalue = undefined;  updatenamedisplay();  setinterval(updatenamedisplay, 100);  function updatenamedisplay() {   var thisvalue = namefield.value || "??";   if (lastnamevalue != thisvalue) {     document.getelementbyid('namedisplay').innerhtml = lastnamevalue = thisvalue;   } } 

live example

you'll want avoid having separate 1 of these each field (instead, use single timer of them) , you'll want adjust timer according need — sensitive fact when you're doing this, you're consuming resources. if you'll want stop check @ stage (and it's idea), save return value setinterval:

var timerhandle = setinterval(updatenamedisplay, 100); 

...and stop loop this:

clearinterval(timerhandle); timerhandle = 0; 

---

here's more complete example of dynamically watching fields, using timer when field has focus. i've used jquery example because simplifies , did ask simple (if use library or don't use library, can port enough; main place jquery useful in case in finding inputs within form):

jquery(function($) {   var formtimer = 0,       currentfield,       lastvalue;    updatewatchingindicator();   $('#theform :input')     .focus(startwatching)     .blur(stopwatching)     .keypress(updatecurrentfield);    function startwatching() {     stopwatching();     currentfield = this;     lastvalue = undefined;     formtimer = setinterval(updatecurrentfield, 100);     updatewatchingindicator();   }    function stopwatching() {     if (formtimer != 0) {       clearinterval(formtimer);       formtimer = 0;     }     currentfield = undefined;     lastvalue = undefined;     updatewatchingindicator();   }    function updatecurrentfield() {     var thisvalue;      if (currentfield && currentfield.name) {       thisvalue = currentfield.value || "??";       if (thisvalue != lastvalue) {         lastvalue = thisvalue;         $('#' + currentfield.name + 'display').html(thisvalue);       }     }   }    function updatewatchingindicator() {     var msg;      if (currentfield) {       msg = "(watching, field = " + currentfield.name + ")";     }     else {       msg = "(not watching)";     }     $('#watchingindicator').html(msg);   }  });​ 

live example