Search code examples
javascriptjqueryjquery-steps

jQuery Steps - reset wizard without page reload


I am using jQuery steps ( https://github.com/rstaib/jquery-steps/wiki ) in order to create step by step form to users to fill out. It works great, however I need to be able to reset it. Once user submitted the form (using ajax so the page doesn't refresh), I would like present a user fresh wizard.

Is there a way to reset the wizard? Or perhaps to reload without reloading the page?


Solution

  • I was able to reset my jQuery steps wizard by adding a few lines of code to the solution here, plus a couple extra lines of code to remove the css classes. You'll still need to reset your form using your preferred library before or after calling this function.

    $.fn.steps.reset = function () {
      var wizard = this,
      options = getOptions(this),
      state = getState(this);
      goToStep(wizard, options, state, 0);
    
      for (i = 1; i < state.stepCount; i++) {
        var stepAnchor = getStepAnchor(wizard, i);
        stepAnchor.parent().removeClass("done")._enableAria(false);
      }
    };