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

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