On click button change step - jquery step

Question

So i have this problem with JQuery step, on my first step I disabled the next button to force the user to click on 2 buttons: option 1 or option 2. When the user click in any of the 2 buttons it will go to the next step (step 2). But I don't know how to trigger the event to change of step when the user click on any of those buttons. Any idea of what function to use?

Answer 1

Do you mean something like this or the actual code upon button click?

    $(document).on('click', '.class', function()
    {
        show following step/hide current step?
        clear current html - append next steps html dynamically?
    });

It's hard to guess what you want, try being more specific with your question.

Answer 2

So, I implemented this today (if you are referring to jQuery steps): What you can do is as follows. (You may not need all of the details, such as the transitionalEffects - it was just what I had in my implementation).

$("#steps").steps({
    headerTag: "h3",
    bodyTag: "section",
    enableAllSteps: true,
    transitionEffect: "slide",
    stepsOrientation: "vertical",

    onStepChanged: function(event, currentIndex, priorIndex)
    {
        alert('On step changed'); // you can see the step change was picked up
        var current = $("#steps").steps("getCurrentStep"); // get the current step            
        if(current.title == "My Step Two") // see if it matches the name of the step
            alert('Step two was selected');
    }

});

Here is what your HTML might look like for the steps:

         <div id="steps">
               <h3>My Step One</h3>
                  <section id="stepOne">
                    <!-- step one code -->
                  </section>
               <h3>My Step Two</h3>
                  <section id="stepTwo">
                      <!-- step two code -->
                  </section>
         </div>

What this does is listen for an event called onStepChanged. From that you can then call a method entitled getCurrentStep which returns the entire step object. Then you can ask for the title of the step and see if it matches what was in your steps div tag.

Hopefully this will get you what you need.