单击输入字段时将模式向导重置为原始状态

我有一个表单，当用户单击输入字段以计划重复作业时，该表单会启动模式向导。这按预期工作。但是，现在，在用户完成填写表单并单击"保存"后，当为下一个作业重新打开模式时，它仍保留上一个用户活动的值。因此，我需要清除模式向导，并确保它在用户下次计划作业时加载模式的步骤 1。

这是当用户单击"保存"时触发的jQuery。请注意，我正在尝试在此处重新设置"#scheduleModal"。

$("#save-job").click(function () {
$("#scheduleModal").val(""); // This part doesn't work
});

使用.val可能不是处理此问题的正确方法。将模态设置回其原始状态的正确方法是什么？这是我的模式向导的 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" id="repeat-every"
data-target="#scheduleModal">
</div>
<form id="recurring-job-form">
<div id="scheduleModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="scheduleModalLabel"
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 Details</h3>
</div>
<div class="modal-body" id="recurringJobWizard">
<div class="tab-content">
<div class="tab-pane fade in active" id="step1">
<div class="well">
<label>Repetition Interval</label>
<div class="form-check">
<input type="radio" class="form-check-input repInt" id="daily" name="repetition-interval">
<label class="form-check-label" for="materialUnchecked">Daily</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input repInt" id="dailyM-F" name="repetition-interval">
<label class="form-check-label" for="materialUnchecked">Daily (M - F Only)</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input repInt" id="weekly" name="repetition-interval">
<label class="form-check-label time-interval" for="materialUnchecked">Weekly</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input repInt" id="monthly" name="repetition-interval">
<label class="form-check-label time-interval" for="materialUnchecked">Monthly</label>
</div>
</div>
<a class="btn btn-default next" href="#" data-toggle="tab" data-step="2"
id="secondStep">Continue</a>
</div>
<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 day" id="Monday" name="day-of-week">
<label class="form-check-label day-of-week" for="materialUnchecked">Monday</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input day" id="Tuesday" name="day-of-week">
<label class="form-check-label day-of-week" for="materialUnchecked">Tuesday</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input day" id="Wednesday" name="day-of-week">
<label class="form-check-label day-of-week" for="materialUnchecked">Wednesday</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input day" id="Thursday" name="day-of-week">
<label class="form-check-label day-of-week" for="materialUnchecked">Thursday</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input day" id="Friday" name="day-of-week">
<label class="form-check-label day-of-week" for="materialUnchecked">Friday</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input day" id="Saturday" name="day-of-week">
<label class="form-check-label day-of-week" for="materialUnchecked">Saturday</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input day" id="Sunday" name="day-of-week">
<label class="form-check-label day-of-week" for="materialUnchecked">Sunday</label>
</div>
</div>
<a class="btn btn-default next" href="#dailyOptions" data-toggle="tab" data-step="3"
id="finalStep">Continue</a>
<a class="btn btn-default next" href="#" data-toggle="tab" data-step="2"
id="weeklyBackStep">Back</a>
</div>
<div class="tab-pane fade" id="dailyOptions">
<div class="md-form mx-5 my-5">
<label for="time-selection">Time of Day</label>
<input type="time" id="time-selection" class="form-control">
</div>
<a class="btn btn-default next top-space" href="#" data-toggle="tab" data-step="2"
id="dailyBackStep">Back</a>
</div>
<div class="tab-pane fade" id="monthlyOptions">
<div class="well">
<select class="form-control" id="dayOfMonthSelection">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</div>
<a class="btn btn-default next" href="#dailyOptions" data-toggle="tab" data-step="3">Continue</a>
<a class="btn btn-default next" href="#" data-toggle="tab" data-step="2"
id="monthlyBackStep">Back</a>
</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>
</form>

我希望触发此事件的"保存"按钮的 HTML 代码如下所示：

<div class="form-group">
<span class="btn btn-default btn-success save-button" data-action="save" id="save-job">Save</span>
<span class="btn btn-default btn-warning" data-action="cancel">Cancel</span>
</div>

为了澄清，当用户在输入字段中单击"重复间隔"时，模式向导将打开。

您可以使用.trigger("reset")触发表单重置，这相当于具有类型为reset的按钮。

$("#save-job").click(function() {
$("#recurring-job-form").trigger("reset");
$(".tab-pane:not(#step1)").removeClass("active show");
$("#step1").tab("show"); // reset tabs
});

如果表单重置事件不是您所追求的，那么您可以通过定位每种表单类型来选择替代方法。这会将模式窗体重置回其初始状态，或者您可以修改它以设置下次打开模式时的默认值。

$("#save-job").click(function() {
$("[name='repetition-interval']").prop("checked", false); // OR $("input:radio") for all radio inputs
$("[name='day-of-week']").prop("checked", false);
$("#time-selection").val("");
$("#dayOfMonthSelection option:first").prop("selected", true);
$(".tab-pane:not(#step1)").removeClass("active show");
$("#step1").tab("show");
});

<!--<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="form-group" id="repeat-every-div">
<label>Repeat Every</label>
<input type="text" class="job-repeat-every form-control" data-toggle="modal" id="repeat-every" data-target="#scheduleModal">
</div>
<form id="recurring-job-form">
<div id="scheduleModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="scheduleModalLabel" 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 Details</h3>
</div>
<div class="modal-body" id="recurringJobWizard">
<div class="tab-content">
<div class="tab-pane fade in active" id="step1">
<div class="well">
<label>Repetition Interval</label>
<div class="form-check">
<input type="radio" class="form-check-input repInt" id="daily" name="repetition-interval">
<label class="form-check-label" for="materialUnchecked">Daily</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input repInt" id="dailyM-F" name="repetition-interval">
<label class="form-check-label" for="materialUnchecked">Daily (M - F Only)</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input repInt" id="weekly" name="repetition-interval">
<label class="form-check-label time-interval" for="materialUnchecked">Weekly</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input repInt" id="monthly" name="repetition-interval">
<label class="form-check-label time-interval" for="materialUnchecked">Monthly</label>
</div>
</div>
<a class="btn btn-default next" href="#" data-toggle="tab" data-step="2" id="secondStep">Continue</a>
</div>
<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 day" id="Monday" name="day-of-week">
<label class="form-check-label day-of-week" for="materialUnchecked">Monday</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input day" id="Tuesday" name="day-of-week">
<label class="form-check-label day-of-week" for="materialUnchecked">Tuesday</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input day" id="Wednesday" name="day-of-week">
<label class="form-check-label day-of-week" for="materialUnchecked">Wednesday</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input day" id="Thursday" name="day-of-week">
<label class="form-check-label day-of-week" for="materialUnchecked">Thursday</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input day" id="Friday" name="day-of-week">
<label class="form-check-label day-of-week" for="materialUnchecked">Friday</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input day" id="Saturday" name="day-of-week">
<label class="form-check-label day-of-week" for="materialUnchecked">Saturday</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input day" id="Sunday" name="day-of-week">
<label class="form-check-label day-of-week" for="materialUnchecked">Sunday</label>
</div>
</div>
<a class="btn btn-default next" href="#dailyOptions" data-toggle="tab" data-step="3" id="finalStep">Continue</a>
<a class="btn btn-default next" href="#" data-toggle="tab" data-step="2" id="weeklyBackStep">Back</a>
</div>
<div class="tab-pane fade" id="dailyOptions">
<div class="md-form mx-5 my-5">
<label for="time-selection">Time of Day</label>
<input type="time" id="time-selection" class="form-control">
</div>
<a class="btn btn-default next top-space" href="#" data-toggle="tab" data-step="2" id="dailyBackStep">Back</a>
</div>
<div class="tab-pane fade" id="monthlyOptions">
<div class="well">
<select class="form-control" id="dayOfMonthSelection">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</div>
<a class="btn btn-default next" href="#dailyOptions" data-toggle="tab" data-step="3">Continue</a>
<a class="btn btn-default next" href="#" data-toggle="tab" data-step="2" id="monthlyBackStep">Back</a>
</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>
</form>
<div class="form-group">
<span class="btn btn-default btn-success save-button" data-action="save" id="save-job">Save</span>
<span class="btn btn-default btn-warning" data-action="cancel">Cancel</span>
</div>

似乎还有一些额外的缺失代码没有提供。例如，选项卡内容缺少show类，以及单击"继续"时在选项卡之间导航的代码。我已经注释掉了 Bootstrap CSS，因为我刚刚提到的这些部分对于解决您提出的问题并不重要。

尝试这样做

$('body').on('hidden', '.modal', function() {
$('form')[0].reset();
});

相关内容

最新更新

热门标签：