Сбросить форму, используя JQuery, когда традиционный метод не работает - PullRequest
Новая
       0

Сбросить форму, используя JQuery, когда традиционный метод не работает

0 голосов
/ 07 апреля 2020

Я хочу создать форму, которая позволит кому-то создавать переменные для шаблона. Эта форма будет модальной, которая подойдет и позволит кому-то не только создать переменную, но и вставить ее код во входные данные шаблона.

Сейчас я изо всех сил пытаюсь получить форму для сброса, если человек нажимает одну из кнопок сохранения (у меня есть две на тот случай, если они просто захотят создать переменную для последующего использования). Насколько я понимаю, я должен иметь возможность использовать $("#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>

1 Ответ

0 голосов
/ 07 апреля 2020

Как насчет повторного использования функциональности кнопки сброса. В: 

$save.on(eventCatch, () => {
    $modal.hide(changeType, changeTime);
    //$varForm.reset(); 
    $lastField = $varName;
    $('#reset').click()
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...