Question

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

有没有办法重置向导？或者重新加载而不重新加载页面？

Answer 1

我能够通过向解决方案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);
  }
};

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

如果您尝试在步骤0重置，我添加了一个if。

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

您可以粘贴以下内容：

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

jQuery Steps - 重置向导，无需重新加载页面

5 个答案: