将 Textarea 内容传递到现有表单中

Question

我已将此商品添加到购物车中，用户可以选择告知有关该商品的任何进一步信息

Item Textarea

触发 'click' 事件后，会出现带有文本区域的 sweetalert 模式弹出窗口，供用户提供更多信息

Sweetalert popup

我如何将用户在此文本区域内插入的信息传递到现有表单中？一旦他们结账，结账表格就会出现在左侧，提示用户提供他的联系信息

Checkout-Form

function TextArea() {

  Swal.fire({
    title: '<strong>Bemerkung</strong>',
    input: 'textarea',
    inputPlaceholder: "Wir geben unser Bestes den Wunsh zu erfüllen"
  })


}

.cart_item {
  display: flex;
  padding-top: 12px;
  padding-bottom: 12px;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start
}

.cart_item_description {
  display: flex;
  margin-right: 18px;
  margin-left: 18px;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.text-block-14 {
  font-weight: 700px;
}

.remove_button {
  width: 25px;
  height: 25px;
  padding: 0;
  background-color: transparent;
  background-image: url(https://uploads-ssl.webflow.com/5df78d3035688c75f8199fe6/5f37a16d65d8f8df2ca7dafa_trashopenoffice.svg);
  background-position: 0 50%;
  background-size: auto;
  background-repeat: no-repeat;
  background-attachment: scroll;
  color: transparent;
  outline: none;
}

.w-button {
  display: inline-block;
  padding: 9px 15px;
  background-color: white;
  color: white;
  border: 0;
  line-height: inherit;
  text-decoration: none;
  cursor: pointer;
  border-radius: 0
}

.bemerkung {
  position: relative;
  left: 30px;
  top: -24px;
  width: 25px;
  height: 25px;
  background-color: transparent;
  background-image: url(https://uploads-ssl.webflow.com/5df78d3035688c75f8199fe6/5f3830b87c03d7ae736cc485_pen%20loading-editing.svg);
  background-position: 0 50%;
  background-size: auto;
  background-repeat: no-repeat;
  background-attachment: scroll;
  color: transparent;
  outline: none;
}

.cart_quantity {
  width: 60px;
  height: 38px;
  margin-bottom: 10px;
  padding: 8px 8px 8px 12px;
  border: 0 solid #fff;
  border-radius: 5px;
  background-color: #f7f8f9;
  box-shadow: 3px 3px 4px 0 rgba(158, 164, 172, .25), -3px -3px 4px 0 #fff;
  outline: none;
}

<div class="cart_item">
  <div class="cart_item_description">
    <div class="text-block-14">Caprese</div>
    <div class="cart-price"></div>
    <div class="dressing">Dressing</div>
    <button class="remove_button w-button" type="button"></button>
    <button class="bemerkung w-button" type="button" onclick="TextArea()"></button>
  </div>
  <input class="cart_quantity" type="number" value="1">
</div>


<!--------------------MODAL------------------------------ -->
<!--------------------JqueryForm------------------------------ -->
<iframe src="Checkout/form.html" scrolling="yes" id="checkout" style="min-width:280px;width:100%;height:600px;border:none;" frameborder="none" allowTransparency="true">
</iframe>
<!-- ----------------------------------------------- -->

<!-- Modal Popup-->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>

https://jsfiddle.net/davon924/6rzfwjoL/23/

Answer 1

根据 SweetAlert docs，swal() 方法 returns 模态动作完成时的承诺。

您可以像这样简单地访问文本区域内容：

function TextArea() {

  Swal.fire({
    title: '<strong>Bemerkung</strong>',
    input: 'textarea',
    inputPlaceholder: "Wir geben unser Bestes den Wunsh zu erfüllen"
  }).then(result => {
    const string = result.value;

    // You can now create a new hidden input node in that target form;  
    const hiddenInput = document.createElement('input');
    hiddenInput.value = string;
    hiddenInput.name = /* appropriate name */;

    document.querySelector( /* form selector */ ).appendChild(hiddenInput);
  });

}

将 Textarea 内容传递到现有表单中

Pass Textarea content into an existing form

javascript

sweetalert