Liveupdate

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <title>Liveupdate demo</title>
</head>
<body>

<input type="text" id="nname"> (nname)<br>
<input type="text" id="fname" > (fname)<br>
<input type="text" id="mname" > (mname)<br>
<input type="text" id="aname" > (aname)<br>
<p id="name_ooutput"></p>

<script type="text/javascript">
/* A convenience function to reverse a string, and
 * one to set the content of an element.
 */
function reverse(s){return s.split('').reverse().join('')}

function set(el,text){
  while(el.firstChild)el.removeChild(el.firstChild);
  el.appendChild(document.createTextNode(text))
}

/* setupUpdater will be called once, on page load.
 */
function setupUpdater(){
  var nname=document.getElementById('nname')
    , fname=document.getElementById('fname')
    , mname=document.getElementById('mname')
    , aname=document.getElementById('aname')
    , orig=document.getElementById('name_ooutput')
    , old_text = nname.value + " " + fname.value + " " + mname.value + " " + aname.value
    , timeout=null;

  /* handleChange is called 50ms after the user stops
     typing. */
  function handleChange(){
    var new_text = nname.value + " " + fname.value + " " + mname.value + " " + aname.value;
    if (new_text==old_text) return; else old_text=new_text;
    set(orig, new_text);
  }

  /* eventHandler is called on keyboard and mouse events.
     If there is a pending timeout, it cancels it.
     It sets a timeout to call handleChange in 50ms. */
  function eventHandler(){
    if(timeout) clearTimeout(timeout);
    timeout=setTimeout(handleChange, 50);
  }

  nname.onkeydown=nname.onkeyup=nname.onclick=eventHandler;
  fname.onkeydown=fname.onkeyup=fname.onclick=eventHandler;
  mname.onkeydown=mname.onkeyup=mname.onclick=eventHandler;
  aname.onkeydown=aname.onkeyup=aname.onclick=eventHandler;
}

setupUpdater();
</script>

</body>
</html>