当用户单击"Save"时清除模态数据

Question

我有一个使用Bootstrap和jQuery的多部分模态向导。当用户到达模态的第 3 部分并单击"保存"时，我想擦除数据 - 因为现在当我重新打开模态时，它会重新加载到第 3 部分，而不是从步骤 1 重新启动，这是它应该做的。

这是我的 HTML：

<div class="form-group" id="repeat-every-div">
<label>Repeat Every</label>
<input type="text" class="job-repeat-every form-control" data-toggle="modal" data-target="#scheduleModal">
</div>
<div id="scheduleModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Recurring Job Steps</h3>
</div>
<div class="modal-body" id="myWizard">
<div class="tab-content">
<div class="tab-pane fade in active" id="step1">
<div class="well">
<label>Recurring Interval</label>
<div class="form-check">
<input type="radio" class="form-check-input" id="daily" name="materialExampleRadios">
<label class="form-check-label" for="materialUnchecked">Daily</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" id="weekly" name="materialExampleRadios">
<label class="form-check-label" for="materialUnchecked">Weekly</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" id="monthly" name="materialExampleRadios">
<label class="form-check-label" for="materialUnchecked">Monthly</label>
</div>
</div>
<!-- <a class="btn btn-default next" href="#step2">Continue</a> -->
<a class="btn btn-default next" href="#weeklyOptions" data-toggle="tab" data-step="2">Continue</a>
</div>
<!-- <div class="tab-pane fade" id="weekly-options"> -->
<div class="tab-pane fade" id="weeklyOptions">
<div class="well">
<label>Day of the Week</label>
<div class="form-check">
<input type="radio" class="form-check-input" id="monday" name="materialExampleRadios">
<label class="form-check-label" for="materialUnchecked">Monday</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" id="tuesday" name="materialExampleRadios">
<label class="form-check-label" for="materialUnchecked">Tuesday</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" id="wednesday" name="materialExampleRadios">
<label class="form-check-label" for="materialUnchecked">Wednesday</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" id="thursday" name="materialExampleRadios">
<label class="form-check-label" for="materialUnchecked">Thursday</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" id="friday" name="materialExampleRadios">
<label class="form-check-label" for="materialUnchecked">Friday</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" id="saturday" name="materialExampleRadios">
<label class="form-check-label" for="materialUnchecked">Saturday</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" id="sunday" name="materialExampleRadios">
<label class="form-check-label" for="materialUnchecked">Sunday</label>
</div>
</div>
<a class="btn btn-default next" href="#step3" data-toggle="tab" data-step="3">Continue</a>
</div>
<div class="tab-pane fade" id="step3">
<div class="md-form mx-5 my-5">
<input type="time" id="inputMDEx1" class="form-control">
<label for="inputMDEx1">Choose your time</label>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary" data-dismiss="modal" id="save-recurring-job">Save</button>
</div>
</div>
</div>
</div>

这就是用户单击"保存"按钮时我所说的：

$("#save-recurring-job").click(
function (event) {
$("#scheduleModal").removeData();
}
);

正如我所提到的，目前这不起作用。当我重新打开模态时，第 3 部分重新加载，最后输入的数据仍然存在。当用户单击"保存"时，我需要在这里做什么来清除所有数据？

Answer 1

要重置数据，您可以将其包装在<form>标记中，并调用表单重置函数以返回到初始状态。

至于活动选项卡，看起来它使用了一个active类，因此您可以将该类添加到第一个类，并通过classList.add/classList.remove关闭(或打开(时从任何其他类中删除。