多部分表单 - jQuery [英] Multipart Form - jQuery

问题描述

我明白这是用于自动创建多部分表单的优秀插件，但我的要求非常简单和基本：

html：

 < form action => 
< fieldset class =step step1> 
字段... 
< button class =continue>继续< / button> 
< / fieldset> 
< fieldset class =step step2> 
字段... 
< button class =back>返回< / button> 
< button class =continue>继续< /按钮> 
< / fieldset> 
< fieldset class =step step3> 
字段... 
< button class =back>返回< / button> 
< button class =submit>提交< / button> 
< / fieldset> 
< / form> 
  

我想一次仅显示一个字段集并滑动（从左到右，反之亦然）使用继续/后退按钮。

感谢任何帮助。

谢谢！

解决方案

  $（'。step1'）。siblings（）。hide（）; //隐藏除第1步以外的所有内容
 
 $（'。continue'）。click（function（）{
 $（this）.closest（'。step'）。hide（）。 next（'。step'）。show（）; 
 return false; 
}）; （）。
 $（'。back'）。click（function（）{
 $（this）.closest（'。step'）。hide（）。prev（'。step'）。show（） ; 
返回false; 
}）; 
  

简单的演示

I understand that are great plugins for auto-creating multi-part forms but my requirement is pretty simple and basic:

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>

I want to show only one step fieldset at a time and slide (left to right and vice versa) using continue/back buttons.

I'd appreciate any help.

Thanks!

解决方案

$('.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

这篇关于多部分表单 - jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！