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


Posted in Javascript onJune 12, 2016

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

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

实现效果如下:

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

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.3water.com/201606/yuanma/JavaScript-formshow(3water.com).rar

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

Javascript 相关文章推荐
js 金额文本框实现代码
Feb 14 Javascript
固定背景实现的背景滚动特效示例分享
May 19 Javascript
jquery中获取id值方法小结
Sep 22 Javascript
JS中Date日期函数中的参数使用介绍
Jan 02 Javascript
JavaScript编程的10个实用小技巧
Apr 18 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
Jan 09 Javascript
Javascript中浏览器窗口的基本操作总结
Aug 18 Javascript
JavaScript解析JSON格式数据的方法示例
Jan 24 Javascript
vue中引入mxGraph的步骤详解
May 17 Javascript
layui radio点击事件实现input显示和隐藏的例子
Sep 02 Javascript
微信小程序实现聊天室
Aug 21 Javascript
一百多行代码实现react拖拽hooks
Mar 23 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
Jun 12 #Javascript
浅谈如何实现easyui的datebox格式化
Jun 12 #Javascript
JQuery的attr 与 val区别
Jun 12 #Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
Jun 12 #Javascript
Java框架SSH结合Easyui控件实现省市县三级联动示例解析
Jun 12 #Javascript
jQuery基于toggle实现click触发DIV的显示与隐藏问题分析
Jun 12 #Javascript
javascript jquery对form元素的常见操作详解
Jun 12 #Javascript
You might like
PHP调用MySQL存储过程并返回值的方法
2014/12/26 PHP
PHP模板引擎Smarty内建函数详解
2016/04/11 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
一直复略了的一个问题,关于表单重复提交
2007/02/15 Javascript
JavaScript面象对象设计
2008/04/28 Javascript
初学js 新节点的创建 删除 的步骤
2011/07/04 Javascript
js给onclick事件赋值,动态传参数实例解说
2013/03/28 Javascript
JS分页控件 可用于无刷新分页
2013/07/23 Javascript
javascript为下拉列表动态添加数据项
2014/05/23 Javascript
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
2015/10/29 Javascript
基于jquery实现表格无刷新分页
2016/01/07 Javascript
javascript类型系统——日期Date对象全面了解
2016/07/13 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
2016/08/04 Javascript
JS+CSS3模拟溢出滚动效果
2016/08/12 Javascript
jQuery模拟窗口抖动效果
2017/03/15 Javascript
基于Vue.js 2.0实现百度搜索框效果
2020/12/28 Javascript
浅谈JS对象添加getter与setter的5种方法
2018/06/09 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
2018/07/15 Javascript
layui 设置table 行的高度方法
2018/08/17 Javascript
微信小程序开发之tabbar图标和颜色的实现
2018/10/17 Javascript
自定义Vue组件打包、发布到npm及使用教程
2019/05/22 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
2019/08/08 jQuery
使用webpack搭建pixi.js开发环境
2020/02/12 Javascript
Js和VUE实现跑马灯效果
2020/05/25 Javascript
[01:03:09]完美世界DOTA2联赛PWL S2 Forest vs SZ 第二场 11.25
2020/11/26 DOTA
python插入数据到列表的方法
2015/04/30 Python
EM算法的python实现的方法步骤
2018/01/02 Python
关于python写入文件自动换行的问题
2018/06/23 Python
解决nohup执行python程序log文件写入不及时的问题
2019/01/14 Python
python ---lambda匿名函数介绍
2019/03/13 Python
python取均匀不重复的随机数方式
2019/11/27 Python
Python参数传递实现过程及原理详解
2020/05/14 Python
道歉短信大全
2015/05/12 职场文书
小学见习报告
2015/06/23 职场文书
商务宴会祝酒词
2015/08/11 职场文书