Jquery 用户单击“保存”时清除模式数据

我有一个使用引导和jQuery的多部分模式向导。当用户进入模式的第3部分并单击save（保存）时，我想擦除数据-因为现在当我重新打开模式时，它会重新加载到第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>

---

正如我所提到的，目前这不起作用。当我重新打开模式时，第3部分将重新加载最后输入的数据。当用户单击“保存”时，我需要在此处执行什么操作才能清除所有数据？

要重置数据，可以将其包装在标记中，然后调用函数以返回初始状态

---

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

html是否在表单中？如果您的意思是，它是否在标记中，答案是否。是的，如果您使用表单标记，则可以调用它的重置函数。这样做可以清除第3部分的数据，但它仍然重新加载了第3部分，而不是从第1步开始。我现在有了：$save-recurtive-job.click函数event{console.log'event:'，event；document.getElementById'recurtive-job-form'.reset；this.classList.remove'active'；}；这修复了该问题，但创建了另一个问题，因为它关闭了打开的整个表单部分。我不希望这样，因为用户需要选择其他表单字段。我们将不得不研究如何处理这个问题。您只需要再次向第一个类添加活动类吗？也许。我会试试的。

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