如何将数据从按钮传输到字段输入？

Question

美好的一天！

该站点有一个带有表单的模式窗口。在整个网站上都有分散的按钮调用这个窗口。

如何将数据传输到模态窗口中表单中的隐藏输入字段？

一个表单和一个按钮的例子：

<form id="37619" method="post">
            <input type="hidden" name="name" id="">
            <input type="text" class="form" name="is-phone" id="form-input-is-phone" placeholder="name">
            <input type="tel" class="form" name="is-phone" id="form-input-is-phone" placeholder="phone">

            <button class="button is-100">Test</button>
        </form>


        <button class="button" data-info="Data from a button or block">Send request</button>

附：需要干净的 javascript，没有 jQuery

提前谢谢你:)

Answer 1

首先给隐藏的输入字段一个唯一的id，比如hiddenField

<input type="hidden" name="name" id="hiddenField">

并将 onclick 事件附加到应将数据传输到输入字段的按钮

<button class="button" data-info="Data from a button or block" onclick="populate(this);">Send request</button>

您正在使用 data 属性来存储要传输到输入字段的字符串。 要检索存储在 data-info 中的自定义数据，我们需要访问按钮的 .dataset 属性。

所以总结一下：

function populate(element) {
  document.getElementById("hiddenField").value = element.dataset.info;
}

<form id="37619" method="post">
  <input type="hidden" name="name" id="hiddenField">
  <input type="text" class="form" name="is-phone" id="form-input-is-phone" placeholder="name">
  <input type="tel" class="form" name="is-phone" id="form-input-is-phone" placeholder="phone">

  <button class="button is-100">Test</button>
</form>


<button class="button" data-info="Data from a button or block" onclick="populate(this);">Send request</button>

更新：

如果您不想使用 onclick 属性添加点击监听器，您可以通过脚本实现相同的功能。 要做到这一点，也要给按钮一个唯一的 id

<button id="theButton" class="button" data-info="Data from a button or block">Send request</button>

现在我们可以使用

获得对我们按钮的引用

document.getElementById("theButton")

并添加一个点击事件监听器

document.getElementById("theButton").addEventListener("click", populate);

回调函数 - 填充 - 几乎相同。不同的是，为了获取导致点击事件的元素，我们需要查询事件的.target属性。

function populate(evt) {
  document.getElementById("hiddenField").value = evt.target.dataset.info;
}
document.getElementById("theButton").addEventListener("click", populate);

<form id="37619" method="post">
  <input type="hidden" name="name" id="hiddenField">
  <input type="text" class="form" name="is-phone" id="form-input-is-phone" placeholder="name">
  <input type="tel" class="form" name="is-phone" id="form-input-is-phone" placeholder="phone">

  <button class="button is-100">Test</button>
</form>


<button id="theButton" class="button" data-info="Data from a button or block">Send request</button>

Answer 2

demo中有详细说明

// Collect all .modal-btn into a NodeList
const btns = document.querySelectorAll('.modal-btn');
// Loop thru NodeList and register each <button> to click event
for (let btn of btns) {
  btn.addEventListener('click', transferData);
}

// Pass event object through callback function
function transferData(e) {
  // Call the function that controls modal
  getModal();
  // Reference the hidden <input>
  const info = document.forms.modal.elements.info;
  /*
  Assign hidden <input> value to the [data-info] value of the clicked
  <button> (e.target always references the element that user
  interacted with -- clicked, changed, hovered, etc)
  */
  info.value = e.target.dataset.info;
  // Verify the new value of hidden <input>
  console.log(info.value);
}

// The proceeding code is for demo purposes and is not required
function getModal() {
  if (document.forms.modal) {
    document.forms.modal.remove();
  }
  const node = document.querySelector('template').content
  const modal = node.cloneNode(true);
  document.querySelector('body').appendChild(modal);
  document.forms.modal.addEventListener('click', exitModal);
}

function exitModal(e) {
  if (e.target === this || e.target.name === 'cancel') {
    this.remove();
  }
}

[name=modal] {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top:0;
  left:0;
  z-index: 1;
  background: rgba(0,0,0,0.3);
}

fieldset {
  width: 50vw;
  height: 50vh;
  position:absolute;
  top: calc(50% - 25vh);
  left: calc(50% - 25vw);
  animation: fade 1.5s;
  background: #fff;
  text-align:center;
}

@keyframes fade {
  0%{
    opacity:0.0;
  }

  100% {
    opacity: 1.0;
  }
}

<template>

<form id="m37619" name='modal' method="post">
  <fieldset name='fields'>
    <input name="info" type="hidden">
    <input name="name" class="form" type="text" placeholder="Jon Doe">
    <input name="phone" class="form" type="tel" placeholder="408-378-5555"><br>
    <button name='cancel' type='button'>Cancel</button> 
    <button>Send</button>
  </fieldset>
</form>

</template>


<button class="modal-btn" data-info="data1">1</button>
<button class="modal-btn" data-info="data2">2</button>
<button class="modal-btn" data-info="data3">3</button>
<button class="modal-btn" data-info="data4">4</button>
<button class="modal-btn" data-info="data5">5</button>