Das Formular hat der Übersichtlichkeit halber mehrere Ebenen. Ein Klick auf "Submit" schickt alle Werte an das Script, das die Eingaben verarbeitet.
Autor: unbekannt
zur Demo
<script language="JavaScript"><!--
function update(n) {
var what;
if (document.getElementById) what = document.getElementById('myForm').elements;
else if (document.all) what = document.all['myTab'].myForm.elements;
else if (document.layers) what = document.layers['myTab'].document.myForm.elements;
for (var i=0, j=what.length; i<j; i++) {
var myType = (what[i].type).toLowerCase(), myName = what[i].name;
if (myType == 'radio' && what[i].checked)
document.hiddenForm.elements[myName].value = what[i].value;
if (myType == 'checkbox')
document.hiddenForm.elements[myName].value = ((what[i].checked) ? what[i].value : '');
if (myType == 'password' || myType == 'text' || myType == 'textarea')
document.hiddenForm.elements[myName].value = what[i].value;
if (myType == 'select-one')
document.hiddenForm.elements[myName].value = what[i].options[what[i].selectedIndex].text;
}
}
var theCountries = ['United States','United Kingdom','Canada'];
var theAges = ['0 - 17','16 - 21','22 - 30','30 - 45','45 - 60','60+'];
var theSkills = ['Java','JavaScript','VBScript','ASP','HTML'];
function show(n) {
var output = '<form name="myForm">';
switch(n) {
case 1:
// This demonstrates text and password fields
output += '\n<p>Name:<br>';
output += '\n<input type="text" name="myName" value="' + document.hiddenForm.myName.value + '" size="30">';
output += '\n<p>Email Address:<br>';
output += '\n<input type="text" name="myEmail" value="' + document.hiddenForm.myEmail.value + '" size="30">';
output += '\n<p>Userid:<br>';
output += '\n<input type="text" name="myUserid" value="' + document.hiddenForm.myUserid.value + '" size="30">';
output += '\n<p>Password:<br>';
output += '\n<input type="password" name="myPassword" value="' + document.hiddenForm.myPassword.value + '" size="30">';
break;
case 2:
// This demonstrates more text fields and a select form field
output += '\n<p>Address1:<br>';
output += '\n<input type="text" name="myAddress1" value="' + document.hiddenForm.myAddress1.value + '" size="30">';
output += '\n<p>Address2:<br>';
output += '\n<input type="text" name="myAddress2" value="' + document.hiddenForm.myAddress2.value + '" size="30">';
output += '\n<p>Address3:<br>';
output += '\n<input type="text" name="myAddress3" value="' + document.hiddenForm.myAddress3.value + '" size="30">';
output += '\n<p>Country:';
output += '\n<br><select name="myCountry">';
for (var i=0; i<theCountries.length; i++) {
if (document.hiddenForm.myCountry.value == theCountries[i])
output += '\n<option selected>' + theCountries[i];
else
output += '\n<option>' + theCountries[i];
}
output += '\n<\/select>';
break;
case 3:
// This demonstrates radio form fields
output += '\n<p>Age:';
for (var i=0; i<theAges.length; i++) {
if (document.hiddenForm.myAge.value == theAges[i])
output += '\n<br><input checked type="radio" name="myAge" value="' + theAges[i] + '"> ' + theAges[i];
else
output += '\n<br><input type="radio" name="myAge" value="' + theAges[i] + '"> ' + theAges[i];
}
break;
case 4:
// This demonstrates check box form fields
output += '\n<p>Skills:'
for (var i=0; i<theSkills.length; i++) {
if (document.hiddenForm.elements[theSkills[i]].value == 'on')
output += '\n<br><input checked type="checkbox" name="' + theSkills[i] + '"> - ' + theSkills[i];
else
output += '\n<br><input type="checkbox" name="' + theSkills[i] + '"> - ' + theSkills[i];
}
break;
}
output += '\n<\/form>';
if (document.getElementById) {
if (window.HTMLElement) {
spanNode = document.getElementById('myTab');
while (spanNode.hasChildNodes()) spanNode.removeChild(spanNode.lastChild);
var range = document.createRange();
range.selectNodeContents(spanNode);
spanNode.appendChild(range.createContextualFragment(output));
}
else {
document.all('myTab').innerHTML = output;
}
}
else if (document.all)
document.all('myTab').innerHTML = output;
else if (document.layers) {
document.layers['myTab'].document.open();
document.layers['myTab'].document.writeln(output);
document.layers['myTab'].document.close();
}
}
//--></script>
</head>
<body onLoad="if (document.getElementById || document.all || document.layers) show(tab=1)">
<form name="hiddenForm" method="get">
<input type="hidden" value="" name="myName">
<input type="hidden" value="" name="myEmail">
<input type="hidden" value="" name="myUserid">
<input type="hidden" value="" name="myPassword">
<input type="hidden" value="" name="myAddress1">
<input type="hidden" value="" name="myAddress2">
<input type="hidden" value="" name="myAddress3">
<input type="hidden" value="0" name="myCountry">
<input type="hidden" value="" name="myAge">
<input type="hidden" value="" name="Java">
<input type="hidden" value="" name="JavaScript">
<input type="hidden" value="" name="VBScript">
<input type="hidden" value="" name="ASP">
<input type="hidden" value="" name="HTML">
<input type="button" value="Name" onClick="update(tab);show(tab=1)">
<input type="button" value="Address" onClick="update(tab);show(tab=2)">
<input type="button" value="Age" onClick="update(tab);show(tab=3)">
<input type="button" value="Skills" onClick="update(tab);show(tab=4)">
<input type="submit" value="Submit">
</form>
<span id="myTab" style="position:absolute"></span>
<br><br><br><br><br><br><br><br><br><br><br><br> |