Вопрос Jquery: Как я могу разбить форму, состоящую из нескольких частей, чтобы за один раз был виден только один набор полей?

Question

Я хорошо разбираюсь в XHTML и CSS, но PHP и Javascript для меня кажутся волшебством.

Я создаю дискуссионный сайт с использованием Textpattern CMS на основе PHP . Когда пользователи вошли в систему, они могут использовать открытую форму для добавления новой темы для обсуждения. Существует много полей ввода, сгруппированных по элементу HTML fieldset внутри одного элемента form, который добавляет новую строку в конкретную таблицу базы данных. Я хочу, чтобы показывал только один набор полей за раз , вставляя предыдущие и следующие ссылки, которые позволят пользователям перемещаться между наборами полей .

Textpattern поставляется в комплекте с jquery, и я обнаружил плагин jquery, который описывает эту функцию . Но я не могу заставить его работать.

Вот что у меня в документе head:

<style type="text/css" media="screen">
    fieldset {display: none;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript" src="http://site.url/scripts/jquery.babysteps-0.2.1.js"></script>
<script type="text/javascript" language="javascript">
    $('#step1').bindStep('#step2');
    $('#step2').bindStep('#step3');

    $('#step1').show();
</script>

Моя форма примерно такая:

<fieldset id="step1">
    <legend>Step 1 Fields</legend>
    <!-- fields -->
</fieldset>
<fieldset id="step2">
    <legend>Step 2 Fields</legend>
    <!-- fields -->
</fieldset>
<fieldset id="step3">
    <legend>Step 3 Fields</legend>
    <!-- fields -->
</fieldset>
<input type="submit" value="Post this Article!" />

В результате объявление style скрывает каждые fieldset, но скрипт вообще не показывает step1. Я дважды проверил все пути к файлам и попробовал это, используя ссылку на свой локальный пакет jquery вместо версии Google, но я получаю те же результаты.

Я был бы рад, если бы я мог заставить это работать, но если бы существовал другой способ достичь этого без плагина babysteps, я бы тоже был рад этому результату.

Будем весьма благодарны за любые рекомендации или конкретные советы, которые вы можете предложить! Также могут быть полезны пошаговые инструкции или практические вопросы по устранению неполадок (подключен ли компьютер?).

Заранее спасибо!

Answer 1

Я не уверен в этом конкретном плагине, но только с jquery:

$(function(){

    $('#gotoStep2').click(function(){
        $('#step1').hide();
        $('#step2').show();
        return false;
    });

});

где у вас есть

<input type="button" id="gotoStep2" value="next &raquo;"/>

внутри step1

и ваш css:

#step2, #step3 //etc
{
    display: none;
}

Я уверен, что вы можете решить, как повторить это для всех ваших шагов:)

Answer 2

<script type="text/javascript" language="javascript">
  $(function(){
    $("#step1").bindStep("#step2");
    $("#step2").bindStep("#step3");

    $("#step1").show();
  });
</script>

Если это не сработает, откажитесь от плагина. (Серьезно, даже демо на этой странице не работает.)