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?

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

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.

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

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!

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

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>

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