How to transfer data from a button to a field input?

Question

Good day!

The site has a modal window with a form. And all over the site there are scattered buttons with a call to this window.

How to transfer data to a hidden input field in a form in a modal window?

An example of a form and a button:

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

P.S. Need clean javascript, without jQuery

Thank you in advance :)

Answer 1

First give the hidden input field a unique id like hiddenField

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

and attach an onclick event to the button that should transfer data to the input field

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

You're using the data attribute to store the string you'd like to transfer to the input field. To retrieve the custom data stored inside data-info we need to access the .dataset property of the button.

So to wrap it up:

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>

Update:

If you don't want to add a click listener using the onclick attribute you can achieve the same functionality via script. To do this give the button an unique id too

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

Now we're able to get a reference to our button using

document.getElementById("theButton")

and add a click event listener

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

The callback function - populate - is almost identical. The difference is that in order to get the element that caused the click event we need to query the .target property of the event.

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

Details are commented in 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>