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

问题描述 投票:0回答:1

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

为明确起见,当用户在输入字段中单击“每重复一次”时,将打开模式向导。

jquery modal-dialog
1个回答
0
投票

尝试这样

$('body').on('hidden', '.modal', function() {
         $('form')[0].reset();
  });
© www.soinside.com 2019 - 2024. All rights reserved.