我有一个表单,当用户单击输入字段以计划重复作业时,该表单会启动模式向导。这按预期工作。但是,现在,当用户完成填写表格并单击“保存”后,为下一个作业重新打开模态时,它仍保留上次用户活动中的值。因此,我需要清除模式向导,并确保下次用户计划工作时加载该模式的步骤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>
为明确起见,当用户在输入字段中单击“每重复一次”时,将打开模式向导。
尝试这样
$('body').on('hidden', '.modal', function() {
$('form')[0].reset();
});