मैं एक ऐसा फॉर्म बनाना चाहता हूं जो किसी को टेम्पलेट के लिए चर बनाने की अनुमति दे। यह फ़ॉर्म एक ऐसा मोडल होगा जो सामने आएगा और किसी को न केवल वेरिएबल बनाने बल्कि टेम्पलेट इनपुट में अपना कोड डालने की अनुमति देगा।

इस समय, अगर कोई व्यक्ति किसी एक सेव बटन को दबाता है, तो मैं फॉर्म को रीसेट करने के लिए संघर्ष कर रहा हूं (मेरे पास दो हैं यदि वे बाद में उपयोग करने के लिए एक वैरिएबल बनाना चाहते हैं)। जैसा कि मैं इसे समझता हूं, मुझे $("#formId").trigger("reset"); का उपयोग करने में सक्षम होना चाहिए लेकिन किसी कारण से, यह ऐसा नहीं कर रहा है।

मूल कोडपेन जहां फिक्स बाद में लागू किया जा सकता है 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>
0
Tyler Lazenby 7 अप्रैल 2020, 00:31

1 उत्तर

सबसे बढ़िया उत्तर

आप रीसेट बटन की कार्यक्षमता का पुन: उपयोग कैसे करेंगे। में:

$save.on(eventCatch, () => {
    $modal.hide(changeType, changeTime);
    //$varForm.reset(); 
    $lastField = $varName;
    $('#reset').click()
});
0
Scaramouche 6 अप्रैल 2020, 21:46