Version compl�te: jsB@nk » Form » Dynamique des champs de formulaire
URL: https://www.javascriptbank.com/dynamic-form-fields.html
J'avais besoin d'un formulaire pour les étudiants inscrits à des cours de formation. Je ne pouvais pas trouver exactement ce dont j'avais besoin là-bas, alors j'ai construit ma propre (emprunts du code des autres (crédits accordés dans le code)). Le plus important est que, si, après avoir changé les données, la requérante a modifié le nombre d'étudiants ou de frapper le bouton retour de la page suivante, les données existantes ne seraient pas perdus. N'hésitez pas à faire ce que avec ce code, pas de crédit à mon besoin. Si vous faites mieux, mais, s'il vous plaît n'hésitez pas à l'e-mail me! Créer un formulaire qui change dynamiquement le nombre de champs disponibles fondée sur une liste de valeur.
Version compl�te: jsB@nk » Form » Dynamique des champs de formulaire
URL: https://www.javascriptbank.com/dynamic-form-fields.html
<SCRIPT language=JavaScript><!--/*Write To Layer (Below writetoLyr function only.)© Eddie Traversa (nirvana.media3.net)*/function writetoLyr(name, message) { if (document.layers) { document.layers[name].document.close(); document.layers[name].document.write(message); document.layers[name].document.close(); } else { if (document.all) { eval("document.all." + name + ".innerHTML='" + message + "'"); } else { document.getElementById(name).innerHTML = message; } }}function storeForm() {// sort out the storage of data var fieldname = new Array(); fieldname[0] = "name"; fieldname[1] = "dept"; fieldname[2] = "phone"; fieldname[3] = "email"; for (oi=0;oi<=3;oi++) { for (i=1;i<=20;i++) { if (eval("document.reg."+fieldname[oi]+"_"+i)) { eval("document.reg.s"+fieldname[oi]+"_"+i+".value = document.reg."+fieldname[oi]+"_"+i+".value"); } else { eval("document.reg.s"+fieldname[oi]+"_"+i+".value = ''"); } } }}function sendForm() {// sort out the storage of data storeForm()// submit formdocument.reg.submit()}function numstudentstoget(namelay) { tabheight = 100; var vararr_alph = new Array(); vararr_alph[0] = 'Student A'; vararr_alph[1] = 'Student B'; vararr_alph[2] = 'Student C'; vararr_alph[3] = 'Student D'; vararr_alph[4] = 'Student E'; vararr_alph[5] = 'Student F'; vararr_alph[6] = 'Student G'; vararr_alph[7] = 'Student H'; vararr_alph[8] = 'Student I'; vararr_alph[9] = 'Student J'; vararr_alph[10] = 'Student K'; vararr_alph[11] = 'Student L'; vararr_alph[12] = 'Student M'; vararr_alph[13] = 'Student N'; vararr_alph[14] = 'Student O'; vararr_alph[15] = 'Student P'; vararr_alph[16] = 'Student Q'; vararr_alph[17] = 'Student R'; vararr_alph[18] = 'Student S'; vararr_alph[19] = 'Student T';var arrname = new Array();var arrdept = new Array();var arrphone = new Array();var arremail = new Array();var fieldname = new Array(); fieldname[0] = "name"; fieldname[1] = "dept"; fieldname[2] = "phone"; fieldname[3] = "email";for (oi=0;oi<=3;oi++) { for (i=0;i<=19;i++) { iadd1=i+1; eval("arr"+fieldname[oi]+"["+i+"] = document.reg.s"+fieldname[oi]+"_"+iadd1+".value"); } } numstuds = document.reg.numStudents.selectedIndex; zerostuds = '' + '' + ' <TABLE style="background: #008081; color: black; font-size: 9pt;"' + ' BORDER=2 CELLSPACING=6 CELLPADDING=6 width="650" height="' + tabheight + '">' + ' <TR>' + ' <TD ALIGN="bottom" COLSPAN="6">' + ' <center>' + ' <TABLE style="background: #008081; color: black; font-size: 9pt;"' + ' BORDER=0 CELLSPACING=0 CELLPADDING=0 width="650" height="' + tabheight + '">' + ' <TR>' + ' <TD ALIGN="bottom" COLSPAN="6">' + ' <center>' + ' <p><font color="#FFFF66"><b>Student fields will appear here, When a number above 0 has been selected.</b></font></p>' + ' </center>' + ' </TR>' + ' </TABLE>' + ' </center>' + ' </TD>' + ' </TR>' + ' </TABLE>';pagetomake = zerostuds;if (numstuds > 0) { buildit = '' + '' + '<TABLE style="background: #008081; color: black; font-size: 9pt;"' + ' BORDER=2 CELLSPACING=6 CELLPADDING=6 width=650 height="' + tabheight + '">' + ' <TR> ' + ' <TD ALIGN="bottom" COLSPAN="6"> ' + ' <center> ' + ' <TABLE style="background: #008081; color: black; font-size: 9pt;" ' + ' BORDER=0 CELLSPACING=0 CELLPADDING=0 width=650 height="' + tabheight + '"> ' + ' <TR> ' + ' <TD ALIGN="bottom" COLSPAN="6"> ' + ' <TR>' + ' <TD width="110px" height="20" style="background-color: #008081 ; color: #ffffff; font-size: 9pt; font-weight: bold; " ALIGN= "left"><b> Name<b><font color="red">*</font></b></b></TD>' + ' <TD width="182px" height="20" style="background-color: #008081 ; color: #ffffff; font-size: 9pt; font-weight: bold; " ALIGN= "left"><b> Department</b></TD>' + ' <TD width="20px" height="20" style="background-color: #008081 ; color: #ffffff; font-size: 9pt; font-weight: bold; " ALIGN= "left"><b> Telephone</b></TD>' + ' <TD width="80px" height="20" style="background-color: #008081 ; color: #ffffff; font-size: 9pt; font-weight: bold; " ALIGN= "left"><b> Email</b></TD>' + ' </TR>' + ' <TR>' + ' <TD COLSPAN="6" style="background-color: #008081 ; color: #ffffff; font-size: 9pt; font-weight: bold; " ALIGN= "left" valign="top">'; for (i=1;i<=numstuds;i++) { buildit=buildit+ ' <input type="text" name="name_'+i+'" size="20" value="'; if (arrname[i-1]) { sname=arrname[i-1] } else { sname=vararr_alph[i-1] } buildit=buildit + sname + '"><input type="text" name="dept_'+i+'" value="'+arrdept[i-1] +'" size="35"><input type="text" name="phone_'+i+'" value="'+arrphone[i-1] +'" size="15"><input type="text" name="email_'+i+'" value="'+arremail[i-1] +'" size="15"><br>'; } buildit = buildit + '' + ' </TD>' + ' </TR>' + ' <TR>' + ' <TD COLSPAN="6" style="background-color: #008081 ; color: #ffffff; font-size: 9pt; font-weight: bold; " valign= "top" align="right"><br>' + ' <input type="button" onClick="javascript:sendForm()" value="Next Page >">' + ' </TR>' + ' </TABLE>' + ' </center>' + ' </TD>' + ' </TR>' + ' </TABLE>'; pagetomake = buildit;}else { pagetomake = zerostuds;} writetoLyr(namelay, pagetomake);}function reloadfields(layn) { numstuds = document.reg.numStudents.selectedIndex; // store it first unless students is zero (incase) if (numstuds != 0) { storeForm(); } // reload/load anyway numstudentstoget(layn); }//--></SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><BODY onload="numstudentstoget('studlay')"><FORM name=reg action=nowtatall method=post><DIV id=maindiv><!-- Here we define hidden fields for temp storage of the DHTML field data. so that if they change number of rows, or hit the back button from the next page their data will still be where it was. (Probably is a much better way than this!) --><INPUT type=hidden name=sname_1> <INPUT type=hidden name=sdept_1> <INPUT type=hidden name=sphone_1> <INPUT type=hidden name=semail_1> <INPUT type=hidden name=sname_2> <INPUT type=hidden name=sdept_2> <INPUT type=hidden name=sphone_2> <INPUT type=hidden name=semail_2> <INPUT type=hidden name=sname_3> <INPUT type=hidden name=sdept_3> <INPUT type=hidden name=sphone_3> <INPUT type=hidden name=semail_3> <INPUT type=hidden name=sname_4> <INPUT type=hidden name=sdept_4> <INPUT type=hidden name=sphone_4> <INPUT type=hidden name=semail_4> <INPUT type=hidden name=sname_5> <INPUT type=hidden name=sdept_5> <INPUT type=hidden name=sphone_5> <INPUT type=hidden name=semail_5> <INPUT type=hidden name=sname_6> <INPUT type=hidden name=sdept_6> <INPUT type=hidden name=sphone_6> <INPUT type=hidden name=semail_6> <INPUT type=hidden name=sname_7> <INPUT type=hidden name=sdept_7> <INPUT type=hidden name=sphone_7> <INPUT type=hidden name=semail_7> <INPUT type=hidden name=sname_8> <INPUT type=hidden name=sdept_8> <INPUT type=hidden name=sphone_8> <INPUT type=hidden name=semail_8> <INPUT type=hidden name=sname_9> <INPUT type=hidden name=sdept_9> <INPUT type=hidden name=sphone_9> <INPUT type=hidden name=semail_9> <INPUT type=hidden name=sname_10> <INPUT type=hidden name=sdept_10> <INPUT type=hidden name=sphone_10> <INPUT type=hidden name=semail_10> <INPUT type=hidden name=sname_11> <INPUT type=hidden name=sdept_11> <INPUT type=hidden name=sphone_11> <INPUT type=hidden name=semail_11> <INPUT type=hidden name=sname_12> <INPUT type=hidden name=sdept_12> <INPUT type=hidden name=sphone_12> <INPUT type=hidden name=semail_12> <INPUT type=hidden name=sname_13> <INPUT type=hidden name=sdept_13> <INPUT type=hidden name=sphone_13> <INPUT type=hidden name=semail_13> <INPUT type=hidden name=sname_14> <INPUT type=hidden name=sdept_14> <INPUT type=hidden name=sphone_14> <INPUT type=hidden name=semail_14> <INPUT type=hidden name=sname_15> <INPUT type=hidden name=sdept_15> <INPUT type=hidden name=sphone_15> <INPUT type=hidden name=semail_15> <INPUT type=hidden name=sname_16> <INPUT type=hidden name=sdept_16> <INPUT type=hidden name=sphone_16> <INPUT type=hidden name=semail_16> <INPUT type=hidden name=sname_17> <INPUT type=hidden name=sdept_17> <INPUT type=hidden name=sphone_17> <INPUT type=hidden name=semail_17> <INPUT type=hidden name=sname_18> <INPUT type=hidden name=sdept_18> <INPUT type=hidden name=sphone_18> <INPUT type=hidden name=semail_18> <INPUT type=hidden name=sname_19> <INPUT type=hidden name=sdept_19> <INPUT type=hidden name=sphone_19> <INPUT type=hidden name=semail_19> <INPUT type=hidden name=sname_20> <INPUT type=hidden name=sdept_20> <INPUT type=hidden name=sphone_20> <INPUT type=hidden name=semail_20> <TABLE style="FONT-SIZE: 9pt; BACKGROUND: #008081; COLOR: black" height=130 cellSpacing=6 cellPadding=6 width=650 border=2> <TBODY> <TR> <TD align=bottom colSpan=6> <CENTER> <TABLE style="FONT-SIZE: 9pt; BACKGROUND: #008081; COLOR: black" height=50 cellSpacing=0 cellPadding=0 width=650 border=0> <TBODY> <TR> <TD align=bottom colSpan=6> <CENTER> <TABLE style="FONT-SIZE: 9pt; BACKGROUND: white; COLOR: black" height=50 cellSpacing=1 cellPadding=1 width=650 border=1> <TBODY> <TR> <TD align=bottom colSpan=6> <H2>Student Registration Form</H2> <P>Please choose how many students will be attending below. The name field(s) will automatically be populated with a default value. However, you can still input student names, departments, telephones, and e-mails if you want.</P> <P>Should you need to book more than 20 students on the same course, please contact <B>nobody</B>. <P></P></TD></TR></TBODY></TABLE></CENTER> <TR> <TD style="FONT-WEIGHT: bold; FONT-SIZE: 9pt; COLOR: #ffffff; BACKGROUND-COLOR: #008081" align=bottom colSpan=6 height=30><BR> <H3>Student Information:</H3></TD></TR> <TR> <TD style="FONT-WEIGHT: bold; FONT-SIZE: 9pt; COLOR: #ffffff; BACKGROUND-COLOR: #008081" vAlign=" middle" align=left colSpan=6>How many students will be attending? <SELECT onchange="reloadfields('studlay')" name=numStudents> <OPTION value="option 1" selected>0<OPTION value="option 1">1<OPTION value="option 2">2<OPTION value="option 3">3<OPTION value="option 4">4<OPTION value="option 5">5<OPTION value="option 5">6<OPTION value="option 5">7<OPTION value="option 5">8<OPTION value="option 5">9<OPTION value="option 5">10<OPTION value="option 5">11<OPTION value="option 5">12<OPTION value="option 5">13<OPTION value="option 5">14<OPTION value="option 5">15<OPTION value="option 5">16<OPTION value="option 5">17<OPTION value="option 5">18<OPTION value="option 5">19<OPTION value="option 5">20</OPTION></SELECT> <FONT color=red>*</FONT></B><BR><BR></TD></TR></TBODY></TABLE> <P>Please note that the "Next Page" button, seen after you enter the number of students, is a javascript:sendForm() and is not currently operational. You'll need to supply a destination.</P></CENTER></TD></TR></TBODY></TABLE></DIV><DIV id=studlay style="Z-INDEX: 1; WIDTH: 690px; POSITION: relative; HEIGHT: 800px"></DIV></FORM></BODY><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->