首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

仅一个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程序设计有所帮助。

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

- Author -

海潜

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Javascript的一种模块模式
Sep 08 Javascript
JavaScript高级程序设计（第3版）学习笔记12 js正则表达式
Oct 11 Javascript
js点击更换背景颜色或图片的实例代码
Jun 25 Javascript
多引号嵌套的变量命名的问题
May 09 Javascript
jquery $.trim()方法使用介绍
May 21 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
Aug 12 Javascript
javascript实现实时输出当前的时间
Apr 27 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
Jun 05 Javascript
WdatePicker.js时间日期插件的使用方法
Jul 26 Javascript
vue2中的keep-alive使用总结及注意事项
Dec 21 Javascript
JavaScript引用类型Array实例分析
Jul 24 Javascript
javascript利用canvas实现鼠标拖拽功能
Jul 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
Apache(17) Tkinter(4) Flutter(2) sortInts(1) Hudi(1) 数据重复(1) feDisplacementMap(1) Pool(1) WebSockets(3) Navigator(1)
You might like
第五节--克隆
2006/11/16 PHP
php FPDF类库应用实现代码
2009/03/20 PHP
PHP得到mssql的存储过程的输出参数功能实现
2012/11/23 PHP
php中选择什么接口(mysql、mysqli)访问mysql
2013/02/06 PHP
thinkphp配置连接数据库技巧
2014/12/02 PHP
PHP实现将MySQL重复ID二维数组重组为三维数组的方法
2016/08/01 PHP
mysqli扩展无法在PHP7下升级问题的解决
2019/09/10 PHP
JavaScript的9个陷阱及评点分析
2008/05/16 Javascript
javascript parseInt 大改造
2009/09/27 Javascript
js获取某元素的class里面的css属性值代码
2014/01/16 Javascript
如何在node的express中使用socket.io
2014/12/15 Javascript
基于JavaScript实现div层跟随滚动条滑动
2016/01/12 Javascript
详解JavaScript权威指南之对象
2016/09/27 Javascript
Bootstrap源码解读表单（2）
2016/12/22 Javascript
js 两数组去除重复数值的实例
2017/12/06 Javascript
vue.js 实现点击展开收起动画效果
2018/07/07 Javascript
vue-next/runtime-core 源码阅读指南详解
2019/10/25 Javascript
微信小程序实现录音功能
2019/11/22 Javascript
Python中用Ctrl+C终止多线程程序的问题解决
2013/03/30 Python
python实现多线程采集的2个代码例子
2014/07/07 Python
python编写简单爬虫资料汇总
2016/03/22 Python
Python面向对象之接口、抽象类与多态详解
2018/08/27 Python
Python读取系统文件夹内所有文件并统计数量的方法
2018/10/23 Python
Python用input输入列表的实例代码
2020/02/07 Python
Python如何利用Har文件进行遍历指定字典替换提交的数据详解
2020/11/05 Python
设计模式的基本要素是什么
2014/04/21 面试题
军训自我鉴定范文
2014/02/13 职场文书
《手指教学》反思
2014/02/14 职场文书
《植物妈妈有办法》教学反思
2014/02/25 职场文书
货车司机岗位职责
2014/03/18 职场文书
法人授权委托书
2014/04/03 职场文书
学习十八届四中全会精神思想汇报
2014/10/23 职场文书
大专护理专业自荐信
2015/03/25 职场文书
横空出世观后感
2015/06/09 职场文书
幼儿园大班教学反思
2016/03/02 职场文书
2019年国庆祝福语（70句）
2019/09/19 职场文书