Как перенести данные с кнопки на поле ввода?

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>

PS Нужно почистить javascript, без jQuery

Заранее спасибо:)

Answer 1

Сначала присвойте скрытому полю ввода уникальный идентификатор, например 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 , которого вы можете достичь та же функциональность через скрипт. Для этого присвойте кнопке уникальный идентификатор

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

Функция обратного вызова - заполнение - практически идентична. Разница в том, что для получения элемента, вызвавшего событие click, нам нужно запросить свойство .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

Подробности прокомментированы в демоверсии

// 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>