多部分表单 - jQuery

时间:2010-06-16 09:37:19

标签: jquery forms multipart

我知道这是用于自动创建多部分表单的优秀插件,但我的要求非常简单和基本:

HTML:

<form action="">
    <fieldset class="step step1">
        fields ...
        <button class="continue">Continue</button>
    </fieldset>
    <fieldset class="step step2">
        fields ...
        <button class="back">Back</button>
        <button class="continue">Continue</button>
    </fieldset>
    <fieldset class="step step3">
        fields ...
        <button class="back">Back</button>
        <button class="submit">Submit</button>
    </fieldset>
</form>

我想一次只显示一个步骤字段集,并使用继续/返回按钮滑动(从左到右,反之亦然)。

我很感激任何帮助。

谢谢!

1 个答案:

答案 0 :(得分:1)

$('.step1').siblings().hide(); // hide all except step 1

$('.continue').click(function(){
   $(this).closest('.step').hide().next('.step').show();
   return false;
});
$('.back').click(function(){
   $(this).closest('.step').hide().prev('.step').show();
   return false;
});

simple demo