仅一个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 相关文章推荐
基于datagrid框架的查询
Apr 08 Javascript
原生javascript实现图片按钮切换
Jan 12 Javascript
JavaScript中setFullYear()方法的使用详解
Jun 11 Javascript
javascript如何操作HTML下拉列表标签
Aug 20 Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
Jan 03 Javascript
webpack2.0配置postcss-loader的方法
Aug 17 Javascript
Node.js自定义实现文件路由功能
Sep 22 Javascript
axios post提交formdata的实例
Mar 16 Javascript
vue-cli 3.x配置跨域代理的实现方法
Apr 12 Javascript
JavaScript多种滤镜算法实现代码实例
Dec 10 Javascript
原生JavaScript实现轮播图
Jan 10 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 Vue.js
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 iconv 解决utf-8和gb2312编码转换问题
2010/04/12 PHP
解析在zend Farmework下如何创立一个FORM表单
2013/06/28 PHP
php文件服务实现虚拟挂载其他目录示例
2014/04/17 PHP
PHP实现简易计算器功能
2020/08/28 PHP
PHP之认识(二)关于Traits的用法详解
2019/04/11 PHP
Yii2框架配置文件(Application属性)与调试技巧实例分析
2019/05/27 PHP
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
2015/10/28 Javascript
input点击后placeholder中的提示消息消失
2016/01/15 Javascript
JS实现图片预加载之无序预加载功能代码
2017/05/12 Javascript
vue路由嵌套的SPA实现步骤
2017/11/06 Javascript
Vue 组件修改根实例的数据的方法
2019/04/02 Javascript
微信接入之获取用户头像的方法步骤
2019/09/23 Javascript
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
2020/11/04 Javascript
用python实现面向对像的ASP程序实例
2014/11/10 Python
深入理解python对json的操作总结
2017/01/05 Python
Python Series从0开始索引的方法
2018/11/06 Python
python实现朴素贝叶斯算法
2018/11/19 Python
Python 给定的经纬度标注在地图上的实现方法
2019/07/05 Python
在VS2017中用C#调用python脚本的实现
2019/07/31 Python
Python3操作MongoDB增册改查等方法详解
2020/02/10 Python
python递归函数用法详解
2020/10/26 Python
如何通过安装HomeBrew来安装Python3
2020/12/23 Python
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
2013/01/31 HTML / CSS
Probikekit日本:自行车套件,跑步和铁人三项装备
2017/04/03 全球购物
百度JavaScript笔试题
2015/01/15 面试题
高中生毕业自我鉴定
2013/10/10 职场文书
校班主任推荐信范文
2013/12/03 职场文书
应聘面试自我评价
2014/01/24 职场文书
支部鉴定材料
2014/06/02 职场文书
团日活动总结怎么写
2014/06/25 职场文书
琅琊山导游词
2015/02/05 职场文书
运动会表扬稿范文
2015/05/05 职场文书
农村婚庆主持词
2015/06/29 职场文书
公司员工离职感言
2015/08/03 职场文书
教你如何使用Python开发一个钉钉群应答机器人
2021/06/21 Python
关于nginx 实现jira反向代理的问题
2021/09/25 Servers