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?

Gammon

Answer 1

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

Hartley

Yes, I did the same solution. – Gammon

ReferenceError: getOptions is not defined – Katt

ReferenceError: getOptions is not defined, none of them functions are. – Eastlake

where the hell you got $.fn.steps.reset? – Chilopod

You need to add these lines to the jquery.steps.js file preferable after line #1475 (after skip method) – Verniavernice

Answer 2

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.

Abiotic

Yeah this is the correct one. The if condition is a must. – Verniavernice

Answer 3

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

Custodial

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. – Gammon

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. – Custodial

Currently I am going exactly what you have suggested. However it doesn't completely reset "steps" plugin: tabs are still highlighted and more. – Gammon

Answer 4

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!

Radiolocation

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. – Gammon

Answer 5

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

Subtemperate

Answer 6

The brute force way to do it.
On Call (wizard element id/class, no. of steps): resetJQuerySteps('#wizaro',3);

Requirements:
jquery.steps.css
jquery-3.1.1.min.js
jquery.steps.min.js

Notes:
Add a click event listener for the reset button on page load to set the reset button function, in case the id of the reset button is "resetJSteps" then its query form is "#resetJSteps" also append ".click" or any function that will trigger the reset function, just see the javascript code or search for the vanilla javascript of the click event listener and DOM page load.

The parameters of the resetJQuerySteps should be the id of the div wizard which is the "wizaro" then its query form is "#wizaro" and the number of steps, in this case, it's only "3" steps which are the "key, effects, pager"

Available also in CodePen:

//to load the wizard form
$(".wizard").steps({
    headerTag: "h3",
    bodyTag: "section",
    transitionEffect: "fade",
    autoFocus: true
});

/* Can be replaced with vanilla js code!
   When the user click the reset button, the steps will be reset */
 $(document).ready(function(){
      $("#resetJSteps").click(function(){
        resetJQuerySteps('#wizaro',4);
      });
});

/* Add this snippet below in your javascript code, this is the 
   function that will reset the wizard form */
function resetJQuerySteps(elementTarget, noOfSteps){
    var noOfSteps = noOfSteps - 1;

    var currentIndex = $(elementTarget).steps("getCurrentIndex");
        if(currentIndex >= 1){
            for(var x = 0; x < currentIndex;x++){
                $(elementTarget).steps("previous");
            }
        }
    
    setTimeout(function resetHeaderCall(){ 
    var y, steps;
        for(y = 0, steps= 2; y < noOfSteps;y++){
            //console.log(steps);
            try{
                $(`${elementTarget} > .steps > ul > li:nth-child(${steps})`).removeClass("done");
                    $(`${elementTarget} > .steps > ul > li:nth-child(${steps})`).removeClass("current");
                    $(`${elementTarget} > .steps > ul > li:nth-child(${steps})`).addClass("disabled");

            }
            catch(err){}
      steps++;
        }
    }, 50);
    
}

/* PLAIN CSS */
body {
  font-family: system-ui;
  background: white;
  color: black;
 
}

#wizaro{
  margin-top:10px;
}

<!-- CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="https://jerwinkdc.github.io/html-codes/css/steps/jquery.steps.css" rel="stylesheet">

<div id="wizaro" class="wizard">
    <h3>Keyboard</h3>
    <section>
        <p>Try the keyboard navigation by clicking arrow left or right!</p>
    </section>
    <h3>Effects</h3>
    <section>
        <p>Wonderful transition effects.</p>
    </section>
    <h3>Pager</h3>
    <section>
        <p>The next and previous buttons help you to navigate through your content.</p>
    </section>
  
  <h3>Finalize</h3>
    <section>
        <p>The last content.</p>
    </section>
</div>

<button id="resetJSteps" style="margin-left:15px;" class="btn btn-primary" type="button">
  Reset!
</button>

 <!-- SCRIPTS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://jerwinkdc.github.io/html-codes/js/steps/jquery.steps.min.js"></script>
<script src="https://jerwinkdc.github.io/html-codes/js/validate/jquery.validate.min.js"></script>

Offer

Please add some details in your answer. – Sanitarium

Answer 7

Using Confirmation Message (Sweetalert)

onCanceled: function (event) {
                    var form = $(this);
                    swal({
                        title: "Are you sure?",
                        text: "You are about to reset the form.",
                        type: "warning",
                        showCancelButton: true,
                        confirmButtonColor: "#DD6B55",
                        confirmButtonText: "Yes, reset it!",
                        closeOnConfirm: true
                    }, function () {                    
                       
                        // Reset Form
                        $("#form")[0].reset();
                        // Go to First Tab
                        $("#form-t-0").trigger("click");
                        // Disable other Tabs
                        $('.done').removeClass('done').addClass('disabled');
                    })
                },

Without Confirmation Message

 onCanceled: function (event) {                                                                          


                       // Reset Form
                        $("#form")[0].reset();
                        // Go to First Tab
                        $("#form-t-0").trigger("click");
                        // Disable other Tabs  
                      $('.done').removeClass('done').addClass('disabled');
                  
                },

Psychodrama