仅一个form表单 js实现注册信息依次填写提交功能

前端技术 2023/09/06 JavaScript

我们原先是一个很长的form表单，里面有很多选项。客户反馈这样不够友好，容易看花眼。因此进行改进，实现多步骤进度，多个提交的实现(其实只有一个form提交)。

实现的思路：将表单的选项装入多个div中，一个显示，其他隐藏。

实现效果如下：

1、JavaScript代码

<script type=\"text/javascript\" src=\"js/jquery.js\"></script>
<script type=\"text/javascript\" src=\"js/jquery-powerFloat.js\"></script>
<link rel=\"stylesheet\" href=\"css/powerFloat.css\" type=\"text/css\" />

<script type=\"text/javascript\">
 $(function() {
 $(\".pwdTrigger\").powerFloat({
 eventType : \"focus\",
 targetMode : \"remind\",
 targetAttr : \"placeholder\",
 position : \"2-1\"
 });

 });
</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\");;
 }
 }
</script>

2、CSS代码

<style type=\"text/css\">
.flow_steps ul 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 ul li.done { background-position:100% -46px; background-color:#FFEDA2;}
.flow_steps ul li.current_prev { background-position:100% -23px; background-color:#FFEDA2;}
.flow_steps ul li.current { color:#fff; background-color:#990D1B;}
.flow_steps ul li.last { background-image:none;}
</style>

3、HTML代码

<body>
 <table width=\"600px\">
 <tr>
  <td>
  <div class=\"flow_steps\">
   <ul style=\"list-style-type:none\">
    <li id=\"grxx\" class=\"current\">个人信息</li>
    <li id=\"zjxx\" >证件信息</li>
    <li id=\"qzxx\">签注信息</li>
    <li id=\"qzfs\" class=\"last\">取证方式</li>
   </ul>
  </div>
  </td> 
 </tr>
 
 <tr><td>
  <form action=\"\">
  
  <div id=\"one\">
   <table align=\"center\">
    <tr>
 <td>户口所在地：</td>
 <td><input class=\"pwdTrigger\" type=\"text\" placeholder=\"请输入户口所在地\" /></td>
 </tr>
 <tr>
 <td>中文姓：</td>
 <td><input class=\"pwdTrigger\" type=\"text\" placeholder=\"请输入中文姓\" /></td>
 </tr>
 <tr>
 <td>中文名：</td>
 <td><input class=\"pwdTrigger\" type=\"text\" placeholder=\"请输入中文名\" /></td>
 </tr>
 <tr>
 <td>身份证号：</td>
 <td><input class=\"pwdTrigger\" type=\"text\" placeholder=\"请输入身份证号码\" /></td>
 </tr>
 <tr> 
  <td colspan=\"2\">
 <button type=\"button\" onclick=\"one()\">提交</button>
 </td>
 </tr>
 
   </table>
 </div>

 <div id=\"two\" style=\"display: none\">
 
 <table align=\"center\">
  <tr>
  <td>通行证号</td>
  <td><input class=\"pwdTrigger\" type=\"text\" placeholder=\"请输入证件号码\" /></td>
  </tr>
  <tr>
  <td>有效日期至</td>
  <td><input class=\"pwdTrigger\" type=\"text\" placeholder=\"请输入证件号码\" /></td>
  </tr>
  <tr>
  <td>联系电话</td>
  <td><input class=\"pwdTrigger\" type=\"text\" placeholder=\"请输联系电话，建议是手机号码\" /></td>
  </tr>
  <tr >
  <td >
   <button type=\"button\" onclick=\"two()\">提交</button>
  </td> 
  <td>
   <button type=\"button\" onclick=\"reone()\">上一步</button>
  </td>
  </tr>
 </table>
 
 </div>

  <div id=\"three\" style=\"display: none\">
  <table align=\"center\">
   <tr>
   <td>签注类别</td>
   <td><input class=\"pwdTrigger\" type=\"text\" placeholder=\"请输入签注类别\" /></td>
   </tr>
   <tr>
   <td>前往地</td>
   <td><input class=\"pwdTrigger\" type=\"text\" placeholder=\"请输入前往地\" /></td>
   </tr>
   <tr>
   <td>签证种类</td>
   <td><input class=\"pwdTrigger\" type=\"text\" placeholder=\"请输入签注种类\" /></td>
   </tr>
   <tr >
  <td >
   <button type=\"button\" onclick=\"three()\">提交</button>
  </td> 
  <td>
   <button type=\"button\" onclick=\"retwo()\">上一步</button>
  </td>
  </tr>
  </table>
 </div>
 
 <div id=\"four\" style=\"display: none\">
 <table align=\"center\">
  <tr>
  <td>取证方式</td>
  <td><input class=\"pwdTrigger\" type=\"text\" placeholder=\"请输入取证方式\" /></td>
  </tr>
  <tr >
  <td >
   <button type=\"button\" onclick=\"\">提交</button>
  </td> 
  <td>
   <button type=\"button\" onclick=\"rethree()\">上一步</button>
  </td>
  </tr>
 </table>
 </div>
 
 </form>
 </td>
 </tr>
</table>

</body>
</html>

源码下载：http://xiazai.phpstudy.net/201606/yuanma/JavaScript-formshow(phpstudy.net).rar

 以上就是本文的全部内容，希望对大家学习JavaScript程序设计有所帮助。

本文地址：https://www.stayed.cn/item/15640

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案