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

【问题标题】：jQuery Steps - reset wizard without page reloadjQuery 步骤 - 无需重新加载页面的重置向导
【发布时间】：2014-05-15 12:17:21
【问题描述】：

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

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

【问题讨论】：

标签： javascript jquery jquery-steps

【解决方案1】：

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!

【讨论】：

jQuery Steps - 是一个带有步骤和多种表单的向导 UI。我需要重置整个向导，而不仅仅是一个表单。 PS：目前我正在按照您的建议进行操作，但我想重置整个向导，而不仅仅是表单。

【解决方案2】：

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

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

或者

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

或者只有特殊字段

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

【讨论】：

jQuery Steps - 是一个带有步骤和多种表单的向导 UI。我需要重置整个向导，而不仅仅是一个表单。 PS：目前我正在按照您的建议进行操作，但我想重置整个向导，而不仅仅是表单。
Melr，因为您使用的是 step 插件 + 表单，所以您必须分两步重置您的 webapp。第一步重置您的网络表单->您可以为此使用 from 插件。其次，您需要重置您的步骤 webapp。 ASardar 有一个很好的解决方案Reset steps index when form onFinished。
目前我完全按照您的建议进行。但是它并没有完全重置“步骤”插件：标签仍然突出显示等等。

【解决方案3】：

我可以通过在解决方案here 中添加几行代码来重置我的 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);
  }
};

【讨论】：

是的，我做了同样的解决方案。
ReferenceError: getOptions 未定义
ReferenceError: getOptions is not defined，没有一个是函数。
你到底从哪里弄到 $.fn.steps.reset 的？
您需要将这些行添加到 jquery.steps.js 文件中，最好在第 #1475 行之后（在跳过方法之后）

【解决方案4】：

自定义重置功能的小修正：

$.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 步尝试重置。

【讨论】：

是的，这是正确的。 if 条件是必须的。

【解决方案5】：

你可以粘贴这个：

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

【讨论】：