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.

Abortifacient

Not sure how this is unclear, the people who have provided answers also seem to find it quite clear. – Abortifacient

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

Bracteole

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.

Trichocyst

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

Bangs

is not detecting the event, any ideas? – Nematode

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

Interphone

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.

Repeated

Answer 6

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

for old version.

Inbreeding