jQuery.steps skip a step

Question

I am using the jQuery.steps plugin (http://www.jquery-steps.com/) to guide the users in an internal webpage.

So far so good, now I am facing a little issue, I do have 5 Steps at the moment, what I need to achieve now is: If in the first step a special value from a dropdown is selected, I have to skip the steps 2 and 4 since these are not required at this moment.

Do you guys may have any solution for this?

I hope you get my question and please let me know if you do need additional information.

Thanks!

Answer 1

In the jquery.steps.js

add class to <ul role=\"tablist\" class=\"tablist\"></ul> (line 1037)

change functions goToNextStep & goToPreviousStep to

var length_custom; 
function goToNextStep(wizard, options, state)
{
    length_custom = $('ul.tablist li.skip').length; 
    var newIndex = increaseCurrentIndexBy(state, 1);
    var anchor = getStepAnchor(wizard,  newIndex),
    parent = anchor.parent(),
    isSkip = parent.hasClass("skip");
    if(isSkip){
        goToStep(wizard, options, state, newIndex + length_custom)
    }else{
        return paginationClick(wizard, options, state, newIndex);
    }
}

function goToPreviousStep(wizard, options, state)
{
    var newIndex = decreaseCurrentIndexBy(state, 1);
    var anchor = getStepAnchor(wizard,  newIndex),
    parent = anchor.parent(),
    isSkip = parent.hasClass("skip");
    if(isSkip){
        goToStep(wizard, options, state, newIndex - length_custom)
    }else{
        return paginationClick(wizard, options, state, newIndex);
    }
}

Then add these functions at the bottom of your file

$.fn.steps.skip = function (i) {
    var wizard = this,
    options = getOptions(this),
    state = getState(this);
    if (i < state.stepCount) {
        var stepAnchor = getStepAnchor(wizard, i);
        stepAnchor.parent().addClass("skip");
        refreshSteps(wizard, options, state, i);
    }
};
$.fn.steps.unskip = function (i) {
    var wizard = this,
    options = getOptions(this),
    state = getState(this);
    if (i < state.stepCount) {
        var stepAnchor = getStepAnchor(wizard, i);
        stepAnchor.parent().removeClass("skip");
        refreshSteps(wizard, options, state, i);
    }
};

Now, initialize which step you want to skip

$("#wizard").steps('skip', index);
$("#wizard").steps('skip', index);// if you want to skip more than one step
$("#wizard").steps('skip', index);// if you want to skip more than one step

Disable skip

$("#wizard").steps('unskip', index);
$("#wizard").steps('unskip', index);// if you want to unskip more than one step
$("#wizard").steps('unskip', index);// if you want to unskip more than one step

Answer 2

There are events called onStepChanging , onStepChanged which could be passed to the form.steps . You can write a function to validate your form and steps in that and based on the currentIndex,newIndex you can trigger the next tab.

I am attaching here the link for the same which would help you.