hi, i have a project to do and i want to be able to change the fields on a form on the fly. what i mean by that is that i want to change the value of a field in a HTML form using javascript in real time.
for example, lets say i have a form and i want the user to see the information as they enter it or type it in the browser
i want to have to boxes, one where the user enters the information and the other one where the user sees the information as they enter it. i want the script to show the values each field in the web form to the user
can that be possible?
Comments and replies About javascript form display information as its being entered
javamas:
i think so, i think iknow what you mean
Javascript demo
hostman:
<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> Nompumelelo:
hi
i appreciate your concern wil you please send for me a code to display user's information in a text area when you click submit using java script and css