Javascript  »  Formulare  »  MehrfachFormular

zur Übersicht

Kategorie	Formulare
Bezeichnung	MehrfachFormular
ScriptDemo	Neues Fenster für Demo öffnen
Statistik	23139 Aufrufe davon 0x gestern
Der Clou hierbei ist, dass das Formular der Übersichtlichkeit wegen auf mehrer Ebenen verteilt ist. Ein Klick auf "Submit" schickt alle Werte an das Script, das die Eingaben verarbeitet.
Javascript-Quellcode  (einfach markieren, kopieren und lokal abspeichern) <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>

Kommentare zu MehrfachFormular

5 Kommentar(e) vorhanden / Anzeige der neuesten 5

am 01.07.2006 um 10:48 Uhr von kein Name
funzt net IE 7 Beta... 

am 11.03.2004 um 13:54 Uhr von thomas_bangel
bei mir laeufts anstandslos mit IE & Netscape... 

am 06.08.2003 um 16:23 Uhr von deloen
funktioniert tatsächlich nicht!das script sollte noch einmal überarbeitet oder ganz rausge... 

am 10.07.2003 um 14:43 Uhr von kein Name
super, funzt nicht!... 

am 14.01.2003 um 15:09 Uhr von rob
irgendwas ist noch faul bei diesem script. Es werden nur die oberen felder angezeigt. we... 


Alle Kommentare anzeigen   -   Kommentar hinzufügen