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

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>

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