j查询步骤 - 重置向导而不重新加载页面
jQuery Steps - reset wizard without page reload
我正在使用jQuery步骤（https://github.com/rstaib/jquery-steps/wiki）来创建分步表单供用户填写。它工作得很好，但是我需要能够重置它。用户提交表单后（使用 ajax 使页面不刷新），我想为用户提供一个全新的向导。
有没有办法重置向导？或者也许在不重新加载页面的情况下重新加载？
我能够通过在此处的解决方案中添加几行代码以及几行额外的代码来删除 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);
}
};
自定义
重置功能的小更正：
$.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 重置。
你可以使用 jQuery Form 插件，重置或清除表单非常容易
$('#myFormId').resetForm();
或
$('#myFormId').clearForm();
或仅特殊字段
$('#myFormId .specialFields').clearFields();
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!
你可以粘贴这个：
$.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");
蛮
力方法。
调用时（向导元素 ID/类，步骤数）：resetJQuerySteps('#wizaro',3);
要求：
jquery.steps.css
jquery-3.1.1.min.js
jquery.steps.min.js
注释：
在页面加载时为重置按钮添加一个点击事件侦听器来设置重置按钮函数，如果重置按钮的 id 是"resetJSteps"那么它的查询形式是"#resetJSteps"还附加".click"或任何将触发重置函数的函数，只需查看 javascript 代码或搜索点击事件侦听器和 DOM 页面加载的原版 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>使用确认消息 （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');
},
相关文章：
- 创建新数据和加载现有数据需要单独的视图吗
- 钛 - HTTPClient:打开新的控制器加载
- 保持 JavaScript 在浏览器控制台中运行，即使在新的页面加载之后也是如此
- 路由到新页面时加载不起作用
- 如何在新窗口完成加载后执行某些内容
- 使用新标题重新加载 html 页面
- Primefaces在打开新页面时加载数据消息
- Wordpress音频播放器和平滑状态.在新页面重新加载播放器时调用什么回调函数
- 用新数据重新加载renderer3d
- 文本不被渲染后，新的页面加载- JQuery移动
- 需要在新标签中加载pdf/doc文件，而不是下载，只是想在浏览器中阅读
- 用新参数重新加载页面
- Js和CSS不检测新页面何时加载
- 在新页面上加载一个flash视频，它在上一页上的位置
- 在新窗口中加载代码编写器视图
- 在控制台中使用新脚本重新加载页面
- 如何在加载新页面后加载AJAX数据
- 如何使用jQuery在新窗口中加载页面，然后关闭它们
- Jquery没有看到新的HTML加载到对话框中
- 无法用新值重新加载JGrid
