Jquery Steps: add new tab based upon select

Question

I am using jquery steps to gather some form data from users on mysite, but I am having some difficulty figuring out how to add a new tab upon the result of a user selection

Form:

{{ 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>

I would like to have a additional tab appear based upon the value of the select input. I was attempting to do this in the body not script until I saw this answer. Now I am confused and I think I am getting further from the solution.

here is my script:

<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.

Edit: I should probably add that the wizard is formatted correctly, but it isn't currently adding the new tab or advancing by clicking "next".

score 2 · Answer 1 · answered Jul 09 '14 at 22:53

I got this working:

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

            },



        });

Jquery Steps: add new tab based upon select

1 Answers1