Nous étions à l'origine une forme très longue avec de nombreuses options. Les commentaires des clients ne sont pas assez conviviaux et faciles à voir. Par conséquent, des améliorations sont apportées pour réaliser des progrès en plusieurs étapes et une implémentation de soumissions multiples (en fait, il n'y a qu'une seule soumission de formulaire).
Idée d'implémentation: chargez les options du formulaire en plusieurs divs, l'un montre, les autres se cachent .
L'effet est le suivant:
1. Code javascript
<script type = "text / javascript" src = "js / jquery.js"> </ script> <script type = "text / javascript" src = "js / jQuery-PowerFloat.js"> </ script> <lin type = "text / javascript"> $ (function () {$ (". pwdtrigger"). wallofloat ({EventType: "focus", targetMode: "remind", cibleTtr: "placeholder", position: "2-1"});}); </ / / script type = "text / javascrip $ ("# one"). hide (); $ ("# deux"). show (); $ ("# grxx"). att ("class", "current_prev"); $ ("# zjxx"). attr ("classe", "courant"); }} fonction deux () {if (confirm ("confirmer commit?")) {$ ("# deux"). hide (); $ ("# trois"). show (); $ ("# grxx"). attr ("classe", "fait"); $ ("# zjxx"). attr ("class", "current_prev"); $ ("# qzxx"). attr ("classe", "courant"); }} fonction trois () {if (confirm ("confirmer commit?")) {$ ("# trois"). hide (); $ ("# quatre"). show (); $ ("# grxx"). attr ("classe", "fait"); $ ("# zjxx"). attr ("classe", "fait"); $ ("# qzxx"). attr ("class", "current_prev"); $ ("# qzfs"). attr ("classe", "courant"); }} fonction reone () {if (confirm ("confirmer return?")) {$ ("# one"). show (); $ ("# deux"). hide (); $ ("# grxx"). attr ("classe", "courant"); $ ("# zjxx"). attr ("classe", ""); }} fonction retwo () {if (confirm ("confirmer return?")) {$ ("# trois"). hide (); $ ("# deux"). show (); $ ("# grxx"). att ("class", "current_prev"); $ ("# zjxx"). attr ("classe", "courant"); $ ("# qzxx"). att ("class", ""); }} fonction rethree () {if (confirm ("confirmer return?")) {$ ("# quatre"). hide (); $ ("# trois"). show (); $ ("# grxx"). attr ("classe", "fait"); $ ("# zjxx"). attr ("class", "current_prev"); $ ("# qzxx"). attr ("classe", "courant"); $ ("# qzfs"). attr ("classe", "dernier") ;; }} </ script>2. Code CSS
<style type = "text / css">. flow_steps ul li {float: left; hauteur: 23px; rembourrage: 0 40px 0 30px; hauteur de ligne: 23px; Texte-aligne: Centre; Contexte: URL (IMG / Barbg.png) sans répétition 100% 0 # E4E4; Font-Weight: Bold;}. Flow_Steps ul li.done {Background Position: 100% -46px; Background-Color: # ffeda2;}. flow_steps ul li.current_prev {fond de fond: 100% -23px; Background-Color: # ffeda2;}. flow_steps ul li.current {couleur: #fff; Background-Color: # 990D1B;}. Flow_Steps ul li.last {background-iMage: Aucun;} </ style>3. Code html
<body> <bally> <tr> <td> <div> <ul style = "list-style-type: Aucun"> <li id = "grxx"> information personnelle </li> <li id = "zjxx"> Informations de clondération </li> <li id = "qzx"> INFORMATIONS INFORMATIONS </li> <li id = "qzfs"> Méthode de certification </ li> </td> </ tr> <tr> <td> <formulaire form = ""> <div id = "One"> <Table Align = "Center"> <tr> <Td> Emplacement Emplacement: </td> <td> <entrée type = "Text" Paceholder = "Veuillez saisir l'emplacement de votre enregistrement de ménage" /> </td> <td> <td> <Tr> <Td> type = "text" placeholder = "Veuillez entrer le nom de famille chinois" /> </td> </tr> <tr> <td> Nom chinois: </td> <td> <input type = "Text" Payholder = "Veuillez entrer le nom chinois" /> </td> </ tr> <tr> <td> Numéro de carte d'identité: </td> <td> <entrée type = "Text" Text " /> </ td> </ tr> <tr> <td ColSpan = "2"> <Button Type = "Button" OnClick = "One ()"> Soumider </ Button> </td> </tr> </ Table> </ Div> <div> id = "Two" Style = "Affichage: Aucun"> <Table Align = "Center"> <Tr> <Td> Pass Number </ TD> placeholder = "Veuillez saisir le numéro d'identification" /> </td> </ tr> <tr> <td> Date d'expiration jusqu'à </td> <td> <entrée type = "Text" Paceholder = "Veuillez saisir le numéro d'identification" /> </td> </tr> <tr> <td> Numéro de contact </ / td> <td> <putyle type = "text" PLATHolder = "Numéro d'identification" </tr> <tr> <td> Numéro de contact </td> <td> <entrée type = "Text" Planholder = "Veuillez saisir le numéro de contact, il est recommandé d'être un numéro de téléphone mobile" /> </td> </tr> <tr> <td> <bouton type = "Button" OnClick = "Button" "Button"> Soumettre </futton> </td> <td> onClick = "reone ()"> Précédent </ bouton> </td> </tr> </ table> </ div> <div id = "trois" style = "affichage: non"> <table align = "Center"> <tr> <td> Catégorie de nom de signe </ td> <td> <entrée Type = "Text" PlaceHolder = "Veuillez entrer la catégorie de signature" <Td> Accédez à la place </td> <td> <entrée type = "Text" Planholder = "Veuillez entrer la destination" /> </td> </tr> <tr> <td> Type de visa </td> <Td> <Type de Texte " onclick = "trois ()"> soumettre </ bouton> </td> <td> <bouton type = "bouton" onclick = "retwo ()"> précédent </ div id = "quatre" style = "affichage: aucune" type = "text" placeholder = "Veuillez saisir la méthode de collecte de preuves" /> </ td> </tr> <tr> <td> <bouton type = "Button" onClick = ""> soumettre </ Button> </td> <td> <Button Type = "Button" OnClick = "Rethree ()"> Précéaire </frut> </td> </tr> </tr> </td> </tr> </ table> </ body> </html>
Téléchargement du code source: http://xiazai.vevb.com/201606/yuanma/javascript-formeshow(vevb.com).rar
Ce qui précède concerne cet article, et j'espère qu'il sera utile pour tout le monde d'apprendre la programmation JavaScript.