Javascript Form Display Information As Its Being Entered
Description: Javascript Form Display Information As Its Being Entered
Tags: javascript ,form ,display ,information ,as ,its ,being ,entered
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?
scdsac Tue Aug 25, 2009 dscdsccdscdscdscdscdcds
Nompumelelo Wed May 20, 2009 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
hostman Tue Apr 15, 2008
<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> javamas Tue Apr 15, 2008 where is the code?
javamas Tue Apr 15, 2008 i think so, i think iknow what you mean
Javascript demo
Information
Title: Javascript Form Display Information As Its Being Entered
Info: This Post Has Been Viewed 0 Times Since
Date: Tue Apr 15, 2008
Author
mikeaug2005 Received 5 Replies #799
Related Content
Related Pages
Related Sites
Add Your Website
Share
URL:

Share this page by putting this URL in your comments to other websites like myspace, Facebook, Twitter friendster, Hi5, Groups, Boards, Forum or others. Just Copy and Paste this Code
Embed:

To embed this topic, just copy the code from the "Embed" box. Once you've copied the code, just paste it into your website or blog to embed it
BBCODE::

BBCODE is use on forums. You can put this code on all your BBCODE enabled forums like PhpBB, vBulletin® and others. Just Copy and Paste this code on your Posts and Replies on your forums