javascript - jQuery 步骤 - 无需重新加载页面的重置向导

Question

我正在使用 jQuery 步骤（https://github.com/rstaib/jquery-steps/wiki）来创建分步表格供用户填写。它工作得很好，但是我需要能够重置它。一旦用户提交了表单（使用 ajax 所以页面不会刷新），我想向用户展示一个全新的向导。

有没有办法重置向导？或者也许在不重新加载页面的情况下重新加载？

Answer 1

我可以通过在此处的解决方案中添加几行代码来重置我的 jQuery 步骤向导，再加上几行额外的代码来删除 css 类。在调用此函数之前或之后，您仍然需要使用首选库重置表单。

$.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

使用自定义重置功能进行小修正：

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

我添加了一个 if，以防您尝试在第 0 步重置。

Answer 3

您可以使用jQuery Form Plugin ，重置或清除您的表单非常容易

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

或者

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

或仅特殊字段

$('#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

蛮力的方式来做到这一点。
On Call（向导元素 ID/类，步骤数）：resetJQuerySteps('#wizaro',3);

要求：
jquery.steps.css
jquery-3.1.1.min.js
jquery.steps.min.js

注意：
在页面加载时为reset按钮添加一个click事件监听器来设置reset按钮功能，如果reset按钮的id是“resetJSteps”那么它的查询形式是“#resetJSteps”也附加“.click”或任何触发重置功能的函数，只需查看 javascript 代码或搜索 click 事件侦听器和 DOM 页面加载的 vanilla javascript。

resetJQuerySteps 的参数应该是 div 向导的 id，即“wizaro”，那么它的查询形式是“#wizaro”和步数，在这种情况下，只有“3”步是“关键，效果，寻呼机”

也可在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 6

你可以粘贴这个：

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

在此代码之后的 jquery.steps.js 文件中：

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

并在任何你想要的地方这样称呼它： $('myjquerystepmodal').steps("reset");