Шаги JQuery: добавить новую вкладку на основе выбора

Я использую шаги jquery для сбора некоторых данных формы от пользователей на mysite, но мне трудно понять, как добавить новую вкладку в результате выбора пользователя

Форма:

{{ Form::open(array('url' => 'jobs/save', 'class' => 'form-horizontal', 'id' => 'wizard', 'method' => 'PUT', 'file' => true)) }}

    <h3>Project Overview</h3>
        <fieldset>
                    <div class="bdb">
                        <p class="text-center bdb">Basic Info</p>
                        <input class="span5" type="text" name="title" placeholder="Project Title"><br/>
                        <select name="workType" id="workType" placeholder="What type of project Is it?">
                            <option value="0">What Type of Project is this?</option>
                            <option value="1">New Construction</option>
                            <option value="2">Remodel</option>
                            <option value="3">Professional Services</option>
                            <option value="4">Repair and Maintenance</option>
                            <option value="5">Handyman</option>
                        </select>
                        <br/><br/>
                        <input type="text" name="budget" id="budget" placeholder="What is your budget?"><br/>
                    </div>


            </fieldset>

Я хотел бы, чтобы появилась дополнительная вкладка в зависимости от значения ввода выбора. Я пытался сделать это в теле, а не в скрипте, пока не увидел этот ответ. Теперь я сбит с толку и думаю, что ухожу все дальше от решения.

вот мой сценарий:

<script> $("#wizard").steps({
            headerTag: "h3",
            bodyTag: "fieldset",
            onFinished: function (event, currentIndex)
            {
                 var form = $(this);
                form.submit();

            }

        });

 $(function()
{
    var wizard = $("#wizard").steps({
        onStepChanging: function(event, currentIndex, newIndex)
        {
            if (currentIndex === 0)
            {
                if ($("#workType > option:selected").val() === "1")
                {
                    wizard.steps("insert", 1, {
                        title: "Result 2",
                        contentMode: "html",
                        content: "<p>test</p>"
                    });
                }
            }
            return true;
        }
    });
});

As you can probably tell, i don't have much jquery experience. Thanks in advance for your help.

Изменить: я, вероятно, должен добавить, что мастер отформатирован правильно, но в настоящее время он не добавляет новую вкладку и не продвигается по нажатию кнопки «Далее».


jquery jquery-steps
person retrograde    schedule 09.07.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

У меня это работает:

<script> $("#wizard").steps({
            headerTag: "h3",
            bodyTag: "fieldset",
            transitionEffect: "slideLeft",
            onStepChanging: function(event, currentIndex, newIndex)
            {
                //only apply to first step
                    if (currentIndex === 0 && ($("#workType > option:selected").val()) === "1")
                    {
                            $("#wizard").steps("insert", 1, {
                            title: "Step Title",
                            content: "<p>Step Body</p>"
                            });
                    }
             return true;

            },
            onFinished: function (event, currentIndex)
            {
                 var form = $(this);
                form.submit();

            },



        });

person retrograde    schedule 09.07.2014