多步骤进度，多个提交的实现

最新推荐文章于 2022-01-12 15:07:46 发布

海潜

最新推荐文章于 2022-01-12 15:07:46 发布

阅读量1.8k

点赞数 2

分类专栏： JS 文章标签：多步骤进度 css

本文链接：https://blog.csdn.net/lhq13400526230/article/details/13086893

版权

JS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

我们原先是一个很长的form表单，里面有很多选项。客户反馈这样不够友好，容易看花眼。因此进行改进。实现多步骤进度，多个提交的实现(其实只有一个form提交)。实现的思路将表单的选项装入多个div中，一个显示，其他隐藏。

实现效果如下：

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" οnclick="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" οnclick="two()">提交</button>
		     </td> 
		     <td>
		       <button type="button" οnclick="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" οnclick="three()">提交</button>
		     </td> 
		     <td>
		       <button type="button" οnclick="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" οnclick="">提交</button>
		     </td> 
		     <td>
		       <button type="button" οnclick="rethree()">上一步</button>
		     </td>
		    </tr>
		  </table>
		</div>
		
		</form>
		</td>
   </tr>
</table>

</body>
</html>

4、欢迎大家到我资源里面下载，是【免费】的哦

源代码下载地址

http://download.csdn.net/detail/lhq13400526230/6455549