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

问题描述

我在购物车上添加了此商品，用户可以选择告诉该商品更多信息

Item Textarea

触发“点击”事件后，将弹出带有文本区域的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">$10</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/

解决方法

根据SweetAlert docs，swal()方法在模式操作完成后会返回一个承诺。

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

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);
  });

}