How do I get the current step in jQuery steps wizard?

Question

I'm looking for a way to get the current step in my jQuery Steps wizard. I would like to perform an action if the current step is step 1.

Answer 1

This will return the current step index as an integer.

$("#wizard").steps("getCurrentIndex");

This step index is zero-based.

So, to perform an action on the first step (what I assume you mean by "step 1"), you would do:

if ( $("#wizard").steps("getCurrentIndex") == 0 ) {
    perform_action();
}

Ref: https://github.com/rstaib/jquery-steps/wiki/Methods

Answer 2

There are onStepChanging and onStepChanged events which have currentIndex parameter. You can place your action inside the function for handling any of these events.

Answer 3

The answer can be found in the example code found in the download at:

https://github.com/rstaib/jquery-steps

Here's the snippet I found useful:

            // Example 1: Basic wizard with validation
            $( "#example-1" ).wizard({
                submit: ".submit",
                beforeForward: function( event, state ) {

                    if ( state.stepIndex === 1 ) {
                        $("#name").text($("[name=name]").val());

                    } else if ( state.stepIndex === 2 ) {
                        $("#gender").text($("[name=gender]").val());
                    }
                    return $( this ).wizard( "form" ).valid();
                }
            }).wizard( "form" ).submit(function( event ) {
                event.preventDefault();
                alert( "Form submitted!" );

            }).validate( validate );

Answer 4

I use this code to disabled step 1 and 2 if the current step is 3, add this code to jquery.steps.js

$.fn.steps.done = function () {
  var wizard = this,
  options = getOptions(this),
  state = getState(this);

  if(state.currentIndex == 2){
      for (i = 0; i < 2; i++) {
        var stepAnchor = getStepAnchor(wizard, i);
        stepAnchor.parent().removeClass("done")._enableAria(false);
      }
  }
};

and add this to your html

$("#wizard").steps('done');

Answer 5

$('.selected').prop('rel')

For SmartWizard 3.3.1, the selected step always has a class='selected'. Thus using that class, you can manipulate based on what you want to do.

Answer 6

$("#wizard").smartWizard("currentStep");

for old version.