0

我正在使用 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;
        }
    });
});

正如您可能知道的那样，我没有太多 jquery 经验。在此先感谢您的帮助。

编辑：我可能应该补充一点，该向导的格式正确，但它当前没有添加新选项卡或通过单击“下一步”推进。

4

1 回答 1

1

我得到了这个工作：

<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();

            },



        });

于 2014-07-09T22:53:30.113 回答