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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/22841536/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 23:51:12  来源:igfitidea点击:

jQuery Steps - reset wizard without page reload

javascriptjqueryjquery-steps

提问by MeIr

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.

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

Is there a way to reset the wizard? Or perhaps to reload without reloading the page?

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

采纳答案by atdepott

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.

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

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

回答by Camille Muller

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.

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

回答by Bunkerbuster

You can use jQuery Form Plugin, Resetting or clearing your form is then very Easy

您可以使用jQuery Form Plugin,然后重置或清除您的表单非常简单

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

Or

或者

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

Or only Special Fields

或者只有特殊领域

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

回答by Junaid Ahmad

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:

在此代码之后的 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");
    }
};

and call it like this wherever you want: $('myjquerystepmodal').steps("reset");

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

回答by Borza Adrian

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!