表單註冊下一步流程程式碼例項
在不少的表單註冊中有這樣的效果,那就是註冊過程是分步的,點選下一步可以進行新的資料填寫介面,下面就通過程式碼例項介紹一下如何實現此功能,感興趣的朋友可以做一下參考,程式碼如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> * { margin: 0; padding: 0; list-style-type: none; } a, img { border: 0; } body { font: 12px/180% Arial, Helvetica, sans-serif, "新宋體"; } .formbox { width: 488px; margin: 40px auto; } .formcon { padding: 10px 0; border: solid 1px #ddd } .formcon table input { width: 200px; } .formcon table td { padding: 5px; line-height: 24px; } /* flow_steps */ .flow_steps { height: 23px; overflow: hidden; } .flow_steps li { float: left; height: 23px; padding: 0 40px 0 30px; line-height: 23px; text-align: center; background: url(img/barbg.png) no-repeat 100% 0 #E4E4E4; font-weight: bold; } .flow_steps li.done { background-position: 100% -46px; background-color: #FFEDA2; } .flow_steps li.current_prev { background-position: 100% -23px; background-color: #FFEDA2; } .flow_steps li.current { color: #fff; background-color: #990D1B; } .flow_steps li#qzfs.current, .flow_steps li.last { background-image: none; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> function one() { if (confirm("確定提交?")) { $("#one").hide(); $("#two").show(); $("#grxx").attr("class","current_prev"); $("#zjxx").attr("class","current"); } } function two() { if (confirm("確定提交?")) { $("#two").hide(); $("#three").show(); $("#grxx").attr("class","done"); $("#zjxx").attr("class","current_prev"); $("#qzxx").attr("class","current"); } } function three() { if (confirm("確定提交?")) { $("#three").hide(); $("#four").show(); $("#grxx").attr("class","done"); $("#zjxx").attr("class","done"); $("#qzxx").attr("class","current_prev"); $("#qzfs").attr("class","current"); } } function reone() { if (confirm("確定返回?")) { $("#one").show(); $("#two").hide(); $("#grxx").attr("class","current"); $("#zjxx").attr("class",""); } } function retwo() { if (confirm("確定返回?")) { $("#three").hide(); $("#two").show(); $("#grxx").attr("class","current_prev"); $("#zjxx").attr("class","current"); $("#qzxx").attr("class",""); } } function rethree() { if (confirm("確定返回?")) { $("#four").hide(); $("#three").show(); $("#grxx").attr("class","done"); $("#zjxx").attr("class","current_prev"); $("#qzxx").attr("class","current"); $("#qzfs").attr("class","last"); } } $(document).ready(function(){ $("#btOne").click(function(){one();}); $("#btTwo").click(function(){two();}); $("#btReone").click(function(){reone();}); $("#btThree").click(function(){three();}) $("#btRetwo").click(function(){retwo();}) $("#btRethree").click(function(){rethree();}) }) </script> </head> <body> <div class="formbox"> <div class="flow_steps"> <ul> <li id="grxx" class="current">個人資訊</li> <li id="zjxx" >證件資訊</li> <li id="qzxx">簽註資訊</li> <li id="qzfs" class="last">取證方式</li> </ul> </div> <div class="formcon"> <div id="one"> <table align="center"> <tr> <td align="right" width="140px">戶口所在地:</td> <td><input class="pwdTrigger" type="text" placeholder="請輸入戶口所在地" /></td> </tr> <tr> <td align="right">中文姓:</td> <td><input class="pwdTrigger" type="text" placeholder="請輸入中文姓" /></td> </tr> <tr> <td align="right">中文名:</td> <td><input class="pwdTrigger" type="text" placeholder="請輸入中文名" /></td> </tr> <tr> <td align="right">身份證號:</td> <td><input class="pwdTrigger" type="text" placeholder="請輸入身份證號碼" /></td> </tr> <tr> <td></td> <td><button type="button" id="btOne">提交</button></td> </tr> </table> </div> <div id="two" style="display:none"> <table align="center"> <tr> <td align="right" width="140px">通行證號</td> <td><input class="pwdTrigger" type="text" placeholder="請輸入證件號碼" /></td> </tr> <tr> <td align="right">有效日期至</td> <td><input class="pwdTrigger" type="text" placeholder="請輸入證件號碼" /></td> </tr> <tr> <td align="right">聯絡電話</td> <td><input class="pwdTrigger" type="text" placeholder="請輸聯絡電話,建議是手機號碼" /></td> </tr> <tr> <td></td> <td> <button type="button" id="btTwo">提交</button> <button type="button" id="btReone">上一步</button> </td> </tr> </table> </div> <div id="three" style="display:none"> <table align="center"> <tr> <td align="right" width="140px">簽註類別</td> <td><input class="pwdTrigger" type="text" placeholder="請輸入簽註類別" /></td> </tr> <tr> <td align="right">前往地</td> <td><input class="pwdTrigger" type="text" placeholder="請輸入前往地" /></td> </tr> <tr> <td align="right">簽證種類</td> <td><input class="pwdTrigger" type="text" placeholder="請輸入簽註種類" /></td> </tr> <tr> <td></td> <td> <button type="button" id="btThree">提交</button> <button type="button" id="btRetwo">上一步</button> </td> </tr> </table> </div> <div id="four" style="display:none"> <table align="center"> <tr> <td align="right" width="140px">取證方式</td> <td><input class="pwdTrigger" type="text" placeholder="請輸入取證方式" /></td> </tr> <tr> <td></td> <td> <button type="button">提交</button> <button type="button" id="btRethree">上一步</button> </td> </tr> </table> </div> </div> </div> <div style="text-align:center;clear:both"></div> </body> </html>
上面的程式碼實現了我們的要求,雖然看起來比較龐大,其實極其的簡單。
就是通過元素的隱藏和顯示註冊介面,來實現註冊步驟的切換,頂部的指示條也是通過新增樣式類的方式實現設定。
相關文章
- 表單註冊下一步效果程式碼例項
- jQuery實現的表單註冊驗證程式碼例項jQuery
- HTML 使用表單標籤實現註冊頁面的例項程式碼HTML
- 清空form表單例項程式碼ORM單例
- JavaScript 表單驗證程式碼例項JavaScript
- 表單提示美化效果程式碼例項
- js批量註冊事件處理函式程式碼例項JS事件函式
- javascript批量註冊事件處理函式程式碼例項JavaScript事件函式
- jQuery表單驗證簡單程式碼例項jQuery
- 註冊中心 Eureka 原始碼解析 —— 應用例項註冊發現(一)之註冊原始碼
- jQuery清除表單資料程式碼例項jQuery
- 使用ajax方式提交表單程式碼例項
- Spring系列(一):Spring MVC bean 解析、註冊、例項化流程原始碼剖析SpringMVCBean原始碼
- js驗證表單項是否為空例項程式碼JS
- angularJS進行表單提交程式碼例項AngularJS
- js重置form表單元素值程式碼例項JSORM
- 將表單元素序列為物件程式碼例項物件
- 將form表單序列為物件例項程式碼ORM物件
- 使用for語句批量註冊事件處理函式程式碼例項事件函式
- 微信小程式註冊流程微信小程式
- 表單驗證手機號碼格式例項程式碼
- 註冊中心 Eureka 原始碼解析 —— 應用例項註冊發現(三)之下線原始碼
- 表單序列化應用程式碼相關程式碼例項
- 例項動態註冊跟蹤
- javascript強制閱讀註冊協議指定時間程式碼例項JavaScript協議
- javascript以函式方式提交表單程式碼例項JavaScript函式
- 使用javascript清空表單元素資料程式碼例項JavaScript
- EasyUI實現的form表單提交簡單程式碼例項UIORM
- 註冊中心 Eureka 原始碼解析 —— 應用例項註冊發現(五)之過期原始碼
- 響應式瀑布流程式碼例項
- on()方法一次註冊多個事件處理函式程式碼例項事件函式
- 阻止點選回車提交表單效果程式碼例項
- 使用jquery實現的清空表單元素程式碼例項jQuery
- HTML5自帶表單驗證程式碼例項HTML
- nacos註冊中心原始碼流程分析原始碼
- javascript函式節流程式碼例項分享JavaScript函式
- js選項卡簡單程式碼例項JS
- 註冊中心 Eureka 原始碼解析 —— 應用例項註冊發現(六)之全量獲取原始碼