Составная форма — jQuery

Я понимаю, что это отличные плагины для автоматического создания многокомпонентных форм, но мое требование довольно простое и базовое:

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>

Я хочу показывать только один набор полей шага за раз и скользить (слева направо и наоборот) с помощью кнопок «Продолжить/Назад».

Буду признателен за любую помощь.

Спасибо!


forms jquery multipart
person eozzy    schedule 16.06.2010    source источник

Ответы (1)


arrow_upward
1
arrow_downward 

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

простая демонстрация

person Reigel    schedule 16.06.2010
comment
Потрясающий! jQuery делает это таким простым! ;) - person eozzy; 16.06.2010