html单页面实现分步骤提交表单

这段时间公司做的项目要用这个,主要是注册的选项特别多,直接一路下去是真心不美观的,所以被要求在一个页面上实现简单的分布注册来解决这个情况,实现的过程也比较简单,而且也值得记录一下,以后肯定会常用。需要使用到jQuery,其实纯js也可以,但是代码相对多些,我也懒得再重来一遍了。

html代码如下:

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

主要的概念就是,将一个表单用div分成三份,step1,step2,step3,然后默认隐藏掉step2,step3,通过下一步按钮来隐藏和显示。

css代码如下:

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

css设置高度是随内部元素高度自增长,设置宽度100%占据原本框架。

js代码如下(需要引入jQuery):

$(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"});
    });
});

以上就是简单的单页面分步骤提交表单实现,具体的原理就是控制区块的隐藏显示,主要目的就是,当表单选项特别多的使用,分隔开来可以得到良好的用户体验。
规则之树版权所有,转载注明来源。

发表评论
加载中...

相关文章