仅一个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 相关文章推荐
JavaScript中使用数组方法汇总
Feb 16 Javascript
使用jquery如何获取时间
Oct 13 Javascript
Vue2.x中的Render函数详解
May 30 Javascript
基于AngularJS的拖拽文件上传的实例代码
Jul 15 Javascript
javascript 缓冲运动框架的实现
Sep 29 Javascript
JavaScript引用类型Array实例分析
Jul 24 Javascript
JavaScript设计模式之职责链模式应用示例
Aug 07 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
Apr 10 Javascript
js字符串类型String常用操作实例总结
Jul 05 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
javascript canvas API内容整理
Feb 16 Javascript
React实现全选功能
Aug 25 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操作SVN版本服务器类代码
2011/11/27 PHP
PHP防止跨域提交表单
2013/11/01 PHP
PHP判断文件是否被引入的方法get_included_files用法示例
2016/11/29 PHP
浅析JavaScript中的CSS属性及命名规范
2013/11/28 Javascript
JS实现点击事件统计的简单实例
2016/07/10 Javascript
AngularJS基础 ng-value 指令简单示例
2016/08/03 Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
2016/11/16 Javascript
JS实现直接运行html代码的方法
2017/03/13 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
2017/04/21 Javascript
JS实现可针对算术表达式求值的计算器功能示例
2018/09/04 Javascript
Mpvue中使用Vant Weapp组件库的方法步骤
2019/05/16 Javascript
NodeJS有难度的面试题(能答对几个)
2019/10/09 NodeJs
vue双向绑定数据限制长度的方法
2019/11/04 Javascript
微信小程序实现注册登录功能(表单校验、错误提示)
2019/12/10 Javascript
[48:32]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs VG
2018/04/01 DOTA
win7 下搭建sublime的python开发环境的配置方法
2014/06/18 Python
Python统计日志中每个IP出现次数的方法
2015/07/06 Python
解决Tensorflow使用pip安装后没有model目录的问题
2018/06/13 Python
python输入整条数据分割存入数组的方法
2018/11/13 Python
python矩阵/字典实现最短路径算法
2019/01/17 Python
Tkinter中复选菜单是否被选中的判断与设置方式
2020/03/04 Python
jupyter 实现notebook中显示完整的行和列
2020/04/09 Python
python简单实现最大似然估计&amp;scipy库的使用详解
2020/04/15 Python
利用python如何实现猫捉老鼠小游戏
2020/12/04 Python
HTML5 File接口在web页面上使用文件下载
2017/02/27 HTML / CSS
路易威登和香奈儿手袋:LuxeDH
2017/01/12 全球购物
在求职信中如何凸显个人优势
2013/10/30 职场文书
美术第二课堂活动总结
2014/07/08 职场文书
2014年四风问题自我剖析材料
2014/09/15 职场文书
群众路线自我剖析范文
2014/11/04 职场文书
2014年工作总结与下年工作计划
2014/11/27 职场文书
2014年社区妇联工作总结
2014/12/02 职场文书
营销计划书
2015/01/17 职场文书
惹女朋友生气检讨书
2015/05/06 职场文书
2017新年晚会开幕词
2016/03/03 职场文书
Python基础之pandas数据合并
2021/04/27 Python