jQuery Steps - reset wizard without page reload

Question

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?

score 7 · Accepted Answer · answered Nov 10 '14 at 16:38

7

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

answered Nov 10 '14 at 16:38

atdepott

139
1
6

Yes, I did the same solution. – MeIr Nov 10 '14 at 19:10
5

ReferenceError: getOptions is not defined – David Brierton May 10 '16 at 15:13
1

`ReferenceError: getOptions is not defined`, none of them functions are. – Onheiron Aug 22 '18 at 11:58
where the hell you got $.fn.steps.reset? – Fernando Torres May 30 '19 at 18:11
You need to add these lines to the jquery.steps.js file preferable after line #1475 (after skip method) – Gh0sT Jul 04 '19 at 12:21

score 3 · Answer 2 · answered Dec 06 '16 at 10:07

a small correction with the custom reset function :

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

if(state.currentIndex>0)
{
    goToStep(wizard, options, state, 0);   

    for (i = 1; i < state.stepCount; i++) {
    var stepAnchor = getStepAnchor(wizard, i);
    stepAnchor.parent().removeClass("done")._enableAria(false);
    }
}
};

I added a if, in case you try to reset at step 0.

Yeah this is the correct one. The if condition is a must. – Gh0sT Jul 06 '19 at 05:32 — Gh0sT, Jul 06 '19 at 05:32

score 1 · Answer 3 · answered Apr 22 '14 at 12:42

1

You can use jQuery Form Plugin , Resetting or clearing your form is then very Easy

$('#myFormId').resetForm();

Or

$('#myFormId').clearForm();

Or only Special Fields

$('#myFormId .specialFields').clearFields();

answered Apr 22 '14 at 12:42

Bunkerbuster

841
9
14

jQuery Steps - is a wizard UI with steps and multiple forms. I need to reset entire Wizard not just a single form. PS: Currently I am going exactly what you suggested BUT I want to reset entire Wizard not just form. – MeIr Apr 22 '14 at 19:35
Melr, Because you are using the step plugin + form(s), you will have to reset your webapp in two steps. First step reset you webform(s) -> you can use the from plugin for that. Second you need to reset you step webapp. ASardar has a nice solution [Reset steps index when form onFinished](https://github.com/rstaib/jquery-steps/issues/26). – Bunkerbuster Apr 24 '14 at 06:41
Currently I am going exactly what you have suggested. However it doesn't completely reset "steps" plugin: tabs are still highlighted and more. – MeIr Apr 24 '14 at 12:49

score 0 · Answer 4 · answered Apr 22 '14 at 08:35

0

You can user this function after submitting your form:

function resetForm(id_form){
    $("#" + id_form).find('input[type="text"]').val('');
    $("#" + id_form).find('input[type="password"]').val('');
    $("#" + id_form).find('input[type="checkbox"]').removeAttr("checked");
    $("#" + id_form).find('select option').removeAttr("selected");
    $("#" + id_form).find('textarea').val('');
}

Best regards!

answered Apr 22 '14 at 08:35

Borza Adrian

490
2
12

jQuery Steps - is a wizard UI with steps and multiple forms. I need to reset entire Wizard not just a single form. PS: Currently I am going exactly what you suggested BUT I want to reset entire Wizard not just form. – MeIr Apr 22 '14 at 19:36

score 0 · Answer 5 · answered Feb 21 '19 at 12:59

You can paste this:

$.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);
  }
};

in the jquery.steps.js file right after this code:

$.fn.steps = function (method)
{
    if ($.fn.steps[method])
    {
        return $.fn.steps[method].apply(this, Array.prototype.slice.call(arguments, 1));
    }
    else if (typeof method === "object" || !method)
    {
        return initialize.apply(this, arguments);
    }
    else
    {
        $.error("Method " + method + " does not exist on jQuery.steps");
    }
};

and call it like this wherever you want: $('myjquerystepmodal').steps("reset");

jQuery Steps - reset wizard without page reload

5 Answers5

Linked