多步骤提交表单html代码

引入JS代码

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function(){ //当网页加载完成,开始执行
// 注册分步实现
$('#step1_next').click(function(){ //点击step1区块的下一步按钮,隐藏step1,显示step2
$(".step1").css({"display":"none"});
$(".step2").css({"display":"block"});
});
$('#step2_back').click(function(){ //点击step2区块的返回按钮,隐藏step2,显示step1
$(".step2").css({"display":"none"});
$(".step1").css({"display":"block"});
});
$('#step2_next').click(function(){ //点击step2区块的下一步按钮,隐藏step2,显示step3
$(".step2").css({"display":"none"});
$(".step3").css({"display":"block"});
});
$('#step3_back').click(function(){ //点击step3区块的返回按钮,隐藏step3,显示step2
$(".step3").css({"display":"none"});
$(".step2").css({"display":"block"});
});
});
</script>

引入CSS

.step1{width:100%;
height:auto;
overflow:hidden;
zoom:1;}

.step2,.step3{width:100%;
height:auto;
overflow:hidden;
zoom:1;
display:none;}

Html代码

<div class="step1">
基本内容
<input class="button2" type="button" id="step1_next" value="下一步" />
</div>
<div class="step2">
基1111本内容
<input class="button2" type="button" id="step2_next" value="下一步" />
</div>
<div class="step3">
基2222本内容
<input class="button2" type="submit" value="提交表单" />
</div>

原文链接:https://www.um80.com/435.htm,转载请注明出处。

0
金秋上云特惠新人专享

评论0

本站所有素材,站长均亲自测试过,可放心使用,有什么问题联系我们!18091738064(微信)
没有账号? 注册  忘记密码?

社交账号快速登录

Copyright   ©2017-2024  U码80  陕ICP备17013443号-1  

陕公网安备 61032402000158号