Сброс модального мастера в исходное состояние при нажатии поля ввода

Question

У меня есть форма, которая запускает модальный мастер, когда пользователь нажимает на поле ввода, чтобы запланировать повторяющееся задание. Это работает как ожидалось. Однако прямо сейчас, после того как пользователь заканчивает заполнять форму и нажимает кнопку «сохранить», когда модальное окно открывается для следующего задания, оно все еще содержит значение из последнего пользовательского действия. Поэтому мне нужно очистить модальный мастер и убедиться, что он загружает шаг 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>

Для пояснения, модальный мастер открывается, когда пользователь щелкает в поле ввода для «повтора каждого».

Answer 1

Вы можете запустить сброс формы, используя .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, так как эти части, которые я только что упомянул, не имеют решающего значения для решения вопроса, который вы задали.

Answer 2

попробуй вот так

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