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!

Do you have any code you can show us? Preferably in a JSFiddle — Loyalar, Aug 14 '15 at 12:03
Use `onStepChanging` event of `jquery-steps` and check whether its first step using its `currentIndex` property and if yes check its drop down value and if it is a special value use a custom function which you can get from **[here](http://stackoverflow.com/a/20683212/2065039)** and move to required step. — Guruprasad J Rao, Aug 14 '15 at 12:09
@GuruprasadRao thanks for the link, to check the current index and if the prop has been check is no problem - but to be honest I do not really get on how to add the custom function from the link provided, at least it is not working — Crasher, Aug 14 '15 at 13:42

score 1 · Answer 1 · edited May 15 '18 at 14:16

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

score 0 · Answer 2 · answered Aug 14 '15 at 12:23

0

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.

answered Aug 14 '15 at 12:23

Orange

119
1
8

Thanks for your input, the issue here is: I do have to disable all form fields somehow in the skipped step because of the form validation. And as I see it, I can not skip two steps directly, what do you think? – Crasher Aug 14 '15 at 13:22

score 0 · Answer 3 · answered Oct 11 '19 at 00:47

I came up with a solution based on ajl80 answer.

But I had to change the goToNextStep & goToPreviousStep to:

var length_custom;
function goToNextStep(wizard, options, state)
{
  var valid = false;
  var i = 0;
  while (!valid) {
    i++;
    var newIndex = increaseCurrentIndexBy(state, i);
    var anchor = getStepAnchor(wizard, newIndex),
    parent = anchor.parent(),
    isSkip = parent.hasClass("skip");
    if (!isSkip) valid = true;
  }
  return paginationClick(wizard, options, state, newIndex);
}

function goToPreviousStep(wizard, options, state)
{
  var valid = false;
  var i = 0;
  while (!valid) {
    i++;
    var newIndex = decreaseCurrentIndexBy(state, i);
    var anchor = getStepAnchor(wizard, newIndex),
    parent = anchor.parent(),
    isSkip = parent.hasClass("skip");
    if (!isSkip) valid = true;
  }
  return paginationClick(wizard, options, state, newIndex);
}

jQuery.steps skip a step

3 Answers3

Linked