jquery表单步骤流程导航一步一步填写表单提交信息代码



174 695 232



特效描述:表单步骤导航 一步一步填写 提交信息,方便用户填写信息

代码结构

1. 引入JS

<script type="text/javascript" src="js/jquery.js"></script>

2. HTML代码

<div class="formbox">
	<div class="flow_steps">
		<ul>
			<li id="grxx" class="current">个人信息</li>
			<li id="zjxx" >证件信息</li>
			<li id="qzxx">签注信息</li>
			<li id="qzfs" class="last">取证方式</li>
		</ul>
	</div>
	<div class="formcon">
		<div id="one">
			<table align="center">
				<tr>
					<td align="right" width="140px">户口所在地:</td>
					<td><input class="pwdTrigger" type="text"	placeholder="请输入户口所在地" /></td>
				</tr>
				<tr>
					<td align="right">中文姓:</td>
					<td><input class="pwdTrigger" type="text" placeholder="请输入中文姓" /></td>
				</tr>
				<tr>
					<td align="right">中文名:</td>
					<td><input class="pwdTrigger" type="text" placeholder="请输入中文名" /></td>
				</tr>
				<tr>
					<td align="right">身份证号:</td>
					<td><input class="pwdTrigger" type="text" placeholder="请输入身份证号码" /></td>
				</tr>
				<tr>
					<td></td>
					<td><button type="button" onclick="one()">提交</button></td>
				</tr>
			</table>
		</div>
		<div id="two" style="display:none">
			<table align="center">
				<tr>
					<td align="right" width="140px">通行证号</td>
					<td><input class="pwdTrigger" type="text" placeholder="请输入证件号码" /></td>
				</tr>
				<tr>
					<td align="right">有效日期至</td>
					<td><input class="pwdTrigger" type="text" placeholder="请输入证件号码" /></td>
				</tr>
				<tr>
					<td align="right">联系电话</td>
					<td><input class="pwdTrigger" type="text" placeholder="请输联系电话,建议是手机号码" /></td>
				</tr>
				<tr>
					<td></td> 
					<td><button type="button" onclick="two()">提交</button>&nbsp;&nbsp;&nbsp;&nbsp;<button type="button" onclick="reone()">上一步</button></td>
				</tr>
			</table>
		</div>
		<div id="three" style="display:none">
			<table align="center">
				<tr>
					<td align="right" width="140px">签注类别</td>
					<td><input class="pwdTrigger" type="text" placeholder="请输入签注类别" /></td>
				</tr>
				<tr>
					<td align="right">前往地</td>
					<td><input class="pwdTrigger" type="text" placeholder="请输入前往地" /></td>
				</tr>
				<tr>
					<td align="right">签证种类</td>
					<td><input class="pwdTrigger" type="text" placeholder="请输入签注种类" /></td>
				</tr>
				<tr>
					<td></td> 
					<td><button type="button" onclick="three()">提交</button>&nbsp;&nbsp;&nbsp;&nbsp;<button type="button" onclick="retwo()">上一步</button></td>
				</tr>
			</table>
		</div>
		<div id="four" style="display:none">
			<table align="center">
				<tr>
					<td align="right" width="140px">取证方式</td>
					<td><input class="pwdTrigger" type="text" placeholder="请输入取证方式" /></td>
				</tr>
				<tr>
					<td></td> 
					<td><button type="button" onclick="">提交</button>&nbsp;&nbsp;&nbsp;&nbsp;<button type="button" onclick="rethree()">上一步</button></td>
				</tr>
			</table>
		</div>
	</div>
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 图片头像上传 二级导航菜单 文件上传 下拉导航菜单 文本框 竖直导航菜单 下拉框 图标导航菜单 复选 固定导航菜单 单选 侧边导航菜单 登录框 树形导航菜单 注册框 网址导航菜单 搜索框 导航菜单插件 验证码 文字导航菜单 二级联动 三级联动 城市选择 value赋值 筛选 按钮控制 购物车 颜色选择 表单提交 全选/反选 添加删除 添加标签 密码强度验证 表单验证 html5按钮动画 按钮样式 密码修改设置 滚动导航菜单 滑动导航菜单 浮动导航菜单 导航切换 右键菜单 收缩导航菜单 html5动画导航菜单 flash导航菜单 切换按钮 form表单 导航菜单导航条

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到