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

更新时间：2016年06月12日 11:56:15 作者：海潜

这篇文章主要为大家详细介绍了仅一个form表单，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.jb51.net/201606/yuanma/JavaScript-formshow(jb51.net).rar

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

您可能感兴趣的文章:

教你用wxml2canvas将微信小程序页面转为图片
如果需要实现将小程序的页面转为图片,第一步是要先把页面转为canvas,再将canvas转为图片,下面这篇文章主要给大家介绍了关于用wxml2canvas将微信小程序页面转为图片的相关资料,需要的朋友可以参考下
2022-11-11
利用谷歌地图API获取点与点的距离的js代码
下面是一段利用谷歌地图API获取点点之间距离的代码，采用V3版本中的DirectionsService()
2012-10-10
JS+CSS实现炫酷算盘时钟效果
这篇文章主要为大家详细介绍了如何使用JavaScript和CSS实现炫酷算盘时钟效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2023-12-12
用js遍历 table的脚本
js遍历table的所有元素的代码，方便我们控制table的所有元素，颜色，样式等
2008-07-07
JS表格组件神器bootstrap table详解（基础版）
这篇文章主要介绍了JS表格组件神器bootstrap table，bootstrap table界面采用扁平化的风格，用户体验比较好，更好兼容各种客户端，需要了解更多bootstrap table的朋友可以参考下
2015-12-12
canvas实现手机端用来上传用户头像的代码
这篇文章主要介绍了canvas实现手机端用来上传用户头像的代码代码简单易懂非常不错，具有参考借鉴价值,需要的朋友可以参考下
2016-10-10
如何将JS的变量值传递给ASP变量
asp作为主页面，外接一个js的，我想知道一下能否在js里面调用asp的变量值，如果能这些值是怎么传递过去的呢？本文将提供解决方法，需要的朋友可以参考下
2012-12-12
小程序实现图片移动缩放效果
这篇文章主要为大家详细介绍了小程序实现图片移动缩放效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-05-05
一文详解TypeScript中的内置数据类型
作为一门类型安全的编程语言，TypeScript 提供了多种内置数据类型，帮助我们更好地定义和操作数据，下面小编就来和大家详细聊聊这些数据类型的相关知识吧
2023-06-06
javascript html5实现表单验证
这篇文章主要为大家详细介绍了javascript html5实现表单验证的具体代码，感兴趣的小伙伴们可以参考一下
2016-03-03

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具