在传统方法失败时使用JQuery重置表单

Question

我正在寻找一个表单，它将允许某人为模板创建变量。这个表单将是一个模式，它将出现并允许某人不仅创建变量，而且将其代码插入模板输入。

现在，如果一个人按了其中一个保存按钮，我很难让表单重置(我有两个，以防他们只想做一个变量供以后使用)。据我所知，我应该能够使用$("#formId").trigger("reset");，但出于某种原因，它并没有这么做。

最初的CodePen可以在以后的https://codepen.io/byuilazenbyt/pen/KKpLBeq中应用

​

$(function() {
  // JQuery elements
  const $button = $("#createButton");
  const $modal = $("#modal");
  const $modalWindow = $("#modalWindow");
  const $closeButton = $("#closeButton");
  const $varName = $("#varName");
  const $allInputs = $("input, select");
  const $save = $("#save");
  const $saveInsert = $("#saveAndInsert");
  const $varForm = $("#varForm");

  // Immutable Information
  const eventCatch = "click";
  const changeType = "fade";
  const changeTime = 200;

  // Mutable Information
  let $lastField = $varName;

  // Event Listeners
  $modal.on(eventCatch, () => {
    $modal.hide(changeType, changeTime);
  });
  $button.on(eventCatch, () => {
    $modal.show(changeType, changeTime, () => {
      $lastField.focus();
    });
  });
  $modalWindow.on(eventCatch, (event) => {
    event.stopPropagation();
  });
  $closeButton.on(eventCatch, () => {
    $modal.hide(changeType, changeTime);
  });
  $allInputs.on(eventCatch, (event) => {
    $lastField = $("#" + event.target.id);
  });
  $save.on(eventCatch, () => {
    $modal.hide(changeType, changeTime);
    $varForm.trigger('reset');
    $lastField = $varName;
  });
});

html {
  font-family: "Barlow", sans-serif;
  font-size: 20px;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
}

.main-heading {
  font-size: 4rem;
  margin-top: 0;
  margin-bottom: 1rem;
  padding: 0;
}

.container {
  margin: 1rem auto;
  padding: 0 2rem;
  width: 900px;
  max-width: 100%;
}

.button {
  display: inline-block;
  padding: 0.8rem;
  font: inherit;
  font-size: 1.15rem;
  line-height: 1.15;
  border-radius: 6px;
  border: none;
}

.primary {
  display: block;
  background: #df4b11;
  color: white;
  font-weight: bold;
  cursor: pointer;
}

.primary:focus {
  outline: none;
}

.modal {
  left: 0;
  top: 0;
  position: fixed;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: #7f7f7f;
  background: rgba(0, 0, 0, 0.5);
}

.modal .modal-window {
  background: #eee;
  width: 450px;
  max-width: 100%;
  margin: 1rem auto;
  padding: 1rem;
  box-shadow: inset 0 2px 3px rgba(255, 254, 231, 0.3), 0 4px 2px rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  overflow: hidden;
}

.modal .modal-window .modal-control .close-button {
  color: gray;
  background: none;
  outline: none;
  border: none;
  float: right;
  font-size: 1.5rem;
  font-weight: bold;
}

.modal .modal-window .modal-control .close-button:hover,
.modal .modal-window .modal-control .close-button:focus {
  color: black;
  cursor: pointer;
}

.modal .modal-window .modal-body {
  margin: 0 auto 1rem auto;
  max-width: 100%;
  width: 400px;
}

.modal .modal-window .modal-body .modal-form-container .modal-form .input-group {
  margin-bottom: 0.5rem;
}

.modal .modal-window .modal-body .modal-form-container .modal-form .input-group label,
.modal .modal-window .modal-body .modal-form-container .modal-form .input-group input[type="text"],
.modal .modal-window .modal-body .modal-form-container .modal-form .input-group input[type="tel"],
.modal .modal-window .modal-body .modal-form-container .modal-form .input-group input[type="email"],
.modal .modal-window .modal-body .modal-form-container .modal-form .input-group input[type="number"],
.modal .modal-window .modal-body .modal-form-container .modal-form .input-group input[type="url"],
.modal .modal-window .modal-body .modal-form-container .modal-form .input-group textarea,
.modal .modal-window .modal-body .modal-form-container .modal-form .input-group select {
  display: block;
  width: 100%;
  max-width: 100%;
}

.modal .modal-window .modal-body .modal-form-container .modal-form .input-group input[type="text"],
.modal .modal-window .modal-body .modal-form-container .modal-form .input-group input[type="tel"],
.modal .modal-window .modal-body .modal-form-container .modal-form .input-group input[type="email"],
.modal .modal-window .modal-body .modal-form-container .modal-form .input-group input[type="number"],
.modal .modal-window .modal-body .modal-form-container .modal-form .input-group input[type="url"],
.modal .modal-window .modal-body .modal-form-container .modal-form .input-group textarea,
.modal .modal-window .modal-body .modal-form-container .modal-form .input-group select {
  border: solid 1px #aaa;
  font-size: 1.15rem;
  line-height: 1.15;
  padding: 4px;
  border-radius: 6px;
  -ms-box-sizing: content-box;
  box-sizing: content-box;
}

.modal .modal-window .modal-body .modal-form-container .modal-form .input-group:focus {
  outline: none;
}

.modal .modal-window .modal-body .modal-form-container .modal-form .input-group .radio-description {
  margin-bottom: 0;
}

.modal .modal-window .modal-body .modal-form-container .modal-form .input-group .radio-option .radio-label {
  display: inline;
}

.modal .modal-window .modal-body .modal-form-container .modal-form .button-group {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
}

.modal .modal-window .modal-body .modal-form-container .modal-form .button-group .save {
  background: green;
}

.modal .modal-window .modal-body .modal-form-container .modal-form .button-group .save:hover {
  background: #006700;
}

.modal .modal-window .modal-body .modal-form-container .modal-form .button-group .reset {
  background: darkred;
}

.modal .modal-window .modal-body .modal-form-container .modal-form .button-group .reset:hover {
  background: #720000;
}

.modal .modal-window .modal-body .modal-form-container .modal-form .button-group .save,
.modal .modal-window .modal-body .modal-form-container .modal-form .button-group .reset {
  color: white;
}

.modal .modal-window .modal-body .modal-form-container .modal-form .button-group .save:hover,
.modal .modal-window .modal-body .modal-form-container .modal-form .button-group .save:focus,
.modal .modal-window .modal-body .modal-form-container .modal-form .button-group .reset:hover,
.modal .modal-window .modal-body .modal-form-container .modal-form .button-group .reset:focus {
  cursor: pointer;
  outline: none;
}

.modal .modal-window .modal-body .modal-form-container .modal-form .button-group .save::-moz-selection,
.modal .modal-window .modal-body .modal-form-container .modal-form .button-group .reset::-moz-selection {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.modal .modal-window .modal-body .modal-form-container .modal-form .button-group .save::selection,
.modal .modal-window .modal-body .modal-form-container .modal-form .button-group .reset::selection {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Barlow:400,400i,700,700i&display=swap">

<div class="container">
  <h1 class="main-heading">Variable Modal Design</h1>
  <button id="createButton" class="primary button" type="button">Create Variable</button>
</div>

<div id="modal" class="modal hidden">
  <div id="modalWindow" class="modal-window">
    <div class="modal-control">
      <button id="closeButton" type="button" class="close-button">
        <span>&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <h2>Create Variable</h2>
      <div class="modal-form-container">
        <form id="varForm" class=modal-form action="/">
          <div class="input-group">
            <label for="varName">Name</label>
            <input id="varName" type="text" placeholder="Name of Variable" required="required">
          </div>

          <div class="input-group">
            <label for="varDesc">Description</label>
            <input id="varDesc" type="text" placeholder="Purpose" required="required">
          </div>

          <div class="input-group">
            <label for="shortCode">Short Code</label>
            <input id="shortCode" type="text" placeholder="[name]" required="required">
          </div>

          <div class="input-group">
            <p class="radio-description">Is this a field?</p>
            <div class="radio-option">
              <input id="fieldTrue" type="radio" name="isField" value="true" checked="checked" required="required">
              <label class="radio-label" for="fieldTrue">Yes</label>
            </div>
            <div class="radio-option">
              <input id="fieldFalse" type="radio" name="isField" value="false">
              <label for="fieldFalse" class="radio-label">No</label>
            </div>
          </div>

          <div class="input-group">
            <label for="varType">Type of Field</label>
            <select name="variableType" id="varType" required="required">
              <option value="">(choose one)</option>
              <option value="text" title="Regular Text">Text</option>
              <option value="tel" title="Phone Number">Phone</option>
              <option value="email" title="Email Address">Email</option>
              <option value="checkbox" title="Multiple Options as checks">Checkbox</option>
              <option value="number" title="Regular number">Number</option>
              <option value="Month" title="Only Accepts Months">Month</option>
              <option value="radio" title="Multiple Options as Circles">Radio</option>
              <option value="range">Range</option>
              <option value="time">Time</option>
              <option value="url">Url</option>
              <option value="Week">Week</option>
              <option value="Image">Image</option>
              <option value="date">Date</option>
              <option value="color">Color</option>
            </select>
          </div>
          <div class="input-group">
            <label for="defaultValue">Default Value</label>
            <input id="defaultValue" type="text" placeholder="Its default" required="required">
          </div>
          <div class="input-group button-group">
            <button class="save button" id="saveAndInsert" type="button">Save and Insert</button>
            <button class="save button" id="save" type="button">Save</button>
            <button class="reset button" id="reset" type="reset">Reset</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

​

Answer 1

您可以重用重置按钮的功能吗？在：

$save.on(eventCatch, () => {
    $modal.hide(changeType, changeTime);
    //$varForm.reset(); 
    $lastField = $varName;
    $('#reset').click()
});