我正在使用jQuery steps（https://github.com/rstaib/jquery-steps/wiki）来创建逐步填写表单的步骤。它很好用，但是我需要能够重置它。一旦用户提交了表单（使用ajax，因此页面不会刷新），我想呈现一个新的向导。
有没有办法重置向导？或者重新加载而不重新加载页面？
7个回答
7
我可以通过在解决方案这里添加几行代码来重置我的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);
}
};
- atdepott
5
3
关于自定义重置函数的小修正：
$.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步尝试重置。
- Camille Muller
1
是的，这是正确的。if条件是必须的。 - Gh0sT
1
你可以使用jQuery表单插件，重置或清除你的表单非常容易。
或者
$('#myFormId').resetForm();
或者
$('#myFormId').clearForm();
或仅特殊字段
$('#myFormId .specialFields').clearFields();
- Bunkerbuster
3
jQuery Steps - 是一个带有步骤和多个表单的向导界面。我需要重置整个向导，而不仅仅是单个表单。附注：目前我正在按照您建议的方式操作，但我想要重置整个向导，而不仅仅是表单。 - MeIr
Melr，因为您正在使用步骤插件+表单，所以您需要分两步重置您的Web应用程序。第一步是重置您的Web表单->您可以使用表单插件来完成。第二步是重置您的步骤Web应用程序。ASardar有一个不错的解决方案Reset steps index when form onFinished。 - Bunkerbuster
目前我正在按照您建议的做。但是它并没有完全重置“步骤”插件：选项卡仍然被突出显示等。 - MeIr
0
做事的蠢办法。
在Call（向导元素id/class，步骤数）上：resetJQuerySteps（'＃wizaro'，3）;
要求：
jquery.steps.css
jquery-3.1.1.min.js
jquery.steps.min.js
注意事项：
在页面加载时，为重置按钮添加一个点击事件监听器，以设置重置按钮函数。如果重置按钮的id为“resetJSteps”，则其查询表单为“＃resetJSteps”，还可以附加“.click”或任何触发重置功能的函数，只需查看javascript代码或搜索点击事件监听器和DOM页面加载的vanilla javascript。
resetJQuerySteps的参数应该是向导div的id，即“wizaro”，其查询表单为“＃wizaro”，以及步骤数，在这种情况下，仅有“3”个步骤，即“key, effects, pager”
也可在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>- Jerwin Dela Cruz
1
请在您的答案中添加一些细节。 - AsthaUndefined
0
你可以粘贴这个：
$.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");
- Junaid Ahmad
0
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!
- Borza Adrian
1
jQuery Steps - 是一个带有步骤和多个表单的向导UI。我需要重置整个向导，而不仅仅是单个表单。附注：目前我正在按照您建议的方式操作，但我想要重置整个向导，而不仅仅是表单。 - MeIr
0
使用确认消息（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');
})
},
无确认消息
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');
},
- rebo lavo
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
ReferenceError: getOptions is not defined，这些函数都没有定义。 - Carlo Moretti