仅一个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 相关文章推荐
{}与function(){}选用空对象{}来存放keyValue
May 23 Javascript
javascript中为某个元素指定事件的三种方式
Aug 07 Javascript
JavaScript中的this使用详解
Jul 27 Javascript
原生JavaScript制作计算器
Oct 16 Javascript
Bootstrap 3 按钮标签实例代码
Feb 21 Javascript
Javascript 链式作用域详细介绍
Feb 23 Javascript
原生js实现轮播图
Feb 27 Javascript
利用Javascript开发一个二维周视图日历
Dec 14 Javascript
详解如何构建一个Angular6的第三方npm包
Sep 07 Javascript
KOA+egg.js集成kafka消息队列的示例
Nov 09 Javascript
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
node.js中express模块创建服务器和http模块客户端发请求
Mar 06 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获取文件绝对路径的代码(上一级目录)
2011/05/29 PHP
PHP获取毫秒级时间戳的方法
2015/04/15 PHP
php 实现一个字符串加密解密的函数实例代码
2016/11/01 PHP
ThinkPHP框架结合Ajax实现用户名校验功能示例
2019/07/03 PHP
Laravel6.2中用于用户登录的新密码确认流程详解
2019/10/16 PHP
php桥接模式应用案例分析
2019/10/23 PHP
jquery子元素过滤选择器使用示例
2013/06/24 Javascript
固定网页背景图同时保持图片比例的思路代码
2013/08/15 Javascript
jQuery中attr()方法用法实例
2015/01/05 Javascript
jquery实现上下左右滑动的方法
2015/02/09 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
2015/12/04 Javascript
vue 挂载路由到头部导航的方法
2017/11/13 Javascript
Vue2.5通过json文件读取数据的方法
2018/02/27 Javascript
vue element-ui 绑定@keyup事件无效的解决方法
2018/03/09 Javascript
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
2019/11/01 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
2020/05/23 Javascript
用Python计算三角函数之atan()方法的使用
2015/05/15 Python
Python中if __name__ == '__main__'作用解析
2015/06/29 Python
python多进程下实现日志记录按时间分割
2019/07/22 Python
Python正则表达式急速入门(小结)
2019/12/16 Python
pytorch:model.train和model.eval用法及区别详解
2020/02/20 Python
Python3标准库之threading进程中管理并发操作方法
2020/03/30 Python
numpy中生成随机数的几种常用函数(小结)
2020/08/18 Python
pycharm中如何自定义设置通过“ctrl+滚轮”进行放大和缩小实现方法
2020/09/16 Python
python 获取域名到期时间的方法步骤
2021/02/10 Python
Space NK美国站:英国高端美妆护肤商城
2017/05/22 全球购物
性能服装:HYLETE
2018/08/14 全球购物
经理助理岗位职责
2014/03/05 职场文书
环保倡议书范文
2014/05/12 职场文书
中国在我心中演讲稿
2014/09/13 职场文书
我们的节日元宵节活动总结
2015/02/06 职场文书
盲山观后感
2015/06/11 职场文书
教你做个可爱的css滑动导航条
2021/06/15 HTML / CSS
使用Redis实现实时排行榜功能
2021/07/02 Redis
mysql5.7的安装及Navicate长久免费使用的实现过程
2021/11/17 MySQL
TV动画《史上最强大魔王转生为村民A》番宣CM公布
2022/04/01 日漫