Javascript Form Display Information As Its Being Entered

        <style type="text/css" media="screen">
        <!--
div.demoforms form {
    width: 40%;
    margin: 0 3%;
    border: solid 2px black;
    padding: 0 0.5em;
}
div.demoforms form#secondform {
	border-color: #666;
}
div.demoforms span.indent {
	margin-left: 2em;
}
form#secondform {
    float: right;
}
form#firstform p.secondonly {
	display: none;
}
form#secondform p.firstonly {
	display: none;
}

--></style>
<script type="text/javascript">
function fixupMaster (obj) {
	if (obj.childNodes)
		for (var i = 0; i < obj.childNodes.length; ++i) {
			var cobj = obj.childNodes[i];
			if ((cobj.tagName == 'INPUT' && cobj.type == 'text') ||
					cobj.tagName == 'TEXTAREA')
				cobj.onchange = itemChanged;
			fixupMaster (cobj);
		}
}

function fixupSlave (obj) {
	if (obj.childNodes)
		for (var i = 0; i < obj.childNodes.length; ++i) {
			var cobj = obj.childNodes[i];
			if (cobj.id)
				cobj.id += '2';
			if (cobj.name)
				cobj.name += '2';
			if (cobj.tagName == 'INPUT' || cobj.tagName == 'SELECT')
				cobj.disabled = true;
			fixupSlave (cobj);
		}
}

function itemChanged (e) {
	e = e || event;
	var obj = e.target || e.srcElement;
	var switcher = e.type + '/' + obj.tagName +
						(obj.tagName == 'INPUT' ? '/' + obj.type : '');
	switch (switcher) {
	case 'change/TEXTAREA':
	case 'change/INPUT/text':
		document.getElementById (obj.id + '2').value = obj.value;
		break;
	case 'click/INPUT/checkbox':
		document.getElementById ('checkbox2').checked = obj.checked;
		break;
	case 'click/INPUT/radio':
		var fr = document.getElementById ('radios').getElementsByTagName ('input');
		var fr2 = document.getElementById ('radios2').getElementsByTagName ('input');
		for (var i = 0; i < fr.length; ++i)
			if (fr[i].type == 'radio')
				fr2[i].checked = fr[i].checked;
			else
				fr2[i].value = fr[i].value = obj.value;
		break;
	case 'click/OPTION':
		while (obj && obj.tagName != 'SELECT')
			obj = obj.parentNode;
	case 'click/SELECT':
		document.getElementById ('select2').selectedIndex = obj.selectedIndex;
		document.getElementById ('selectval').value =
				document.getElementById ('selectval2').value = obj[obj.selectedIndex].text;
		break;
	}
	return true;
}

window.onload = function () {
	if (! document.getElementById)
		return;
	var f = document.getElementById ('firstform');
	var f2 = f.cloneNode (true);
	f.onclick = itemChanged;
	fixupMaster (f);
	fixupSlave (f2);
	f2.id = 'secondform';
	f.parentNode.insertBefore (f2, f);
	var sel = document.getElementById ('select');
	document.getElementById ('selectval').value =
			document.getElementById ('selectval2').value =
			sel[sel.selectedIndex].text;
}
</script>
 

  
        <div>Javascript demo</div>
        
<div class="demoforms">
        <form id="firstform" action="#" method="get" onsubmit="return false">
            <p class="firstonly">Make changes in this form</p>
            <p class="secondonly">Changes appear in this form</p>
            <p>Text field: <input type="text" id="text" size="20"/></p>

			<p>Text area: <textarea id="textarea" rows="2" cols="20"></textarea></p>
            <p id="radios"><label id="foo">Radio buttons:
            	<label><input type="radio" name="radio" value="one"/> A</label>
            	<label><input type="radio" name="radio" value="two"/> B</label>
            	<label><input type="radio" name="radio" value="three"/> C</label></label><br/>

            	<span class="indent">Selected value:
            		<input type="text" size="6" disabled="disabled"/></span></p>
            <p>Checkbox:
            	<label><input type="checkbox" id="checkbox" value="xyzzy"/> Checkbox value</label></p>
            <p>Drop-down menu:
            	<select id="select">
            		<option>First</option>
            		<option>Second</option>

            		<option>Third</option>
            	</select><br />
            	<span class="indent">Selected value:
            		<input type="text" id="selectval" size="6"
            			disabled="disabled"/></span></p>
        </form>
</div>