There is 1 feedback form in a popup window. And a few buttons to call this pop-up (products).

How to send a form to understand which button it was called from?

At the same time, without making a separate pop-up window and form for each button.

I saw somewhere that a script is tied to buttons: onclick = " script ", but the browser swears, thinking that there is clickjacking and other malicious scripts.

Sandbox with preparation https://jsfiddle.net/Mesuti/jkjsazcq/

<!-- Вот здесь информация о товаре --> <p> Вы выбрали товар = <span id="info"></span></p> <!-- Вот здесь нужно обозначить с какой кнопки была вызвана форма --> <input id="info" type="hidden"> <input type="text" placeholder="Ваше имя?"> <br><br> <input type="text" placeholder="Ваш телефон?"> <br><br><br><br> <!-- Товары --> <button id="item" value="Товар 1">Товар 1</button> <button id="item" value="Товар 2">Товар 2</button> <button id="item" value="Товар 3">Товар 3</button> <button id="item" value="Товар 4">Товар 4</button> <button id="item" value="Товар 5">Товар 5</button> <script> var y = document.getElementById("item").value; document.querySelector('#info').innerHTML = y; </script>
  • Where is the form? id="info" , id="item" - id must be unique on the page. - Igor

3 answers 3

I think a good option would be:

  <!-- Вот здесь информация о товаре --> <p> Вы выбрали товар = <span id="info"></span></p> <!-- Вот здесь нужно обозначить с какой кнопки была вызвана форма --> <input id="infoInput" type="hidden"> <input type="text" placeholder="Ваше имя?"> <br><br> <input type="text" placeholder="Ваш телефон?"> <br><br><br><br> <!-- Товары --> <button id="item1" onclick='setValue("Товар 1")'>Товар 1</button> <button id="item2" onclick='setValue("Товар 2")'>Товар 2</button> <button id="item3" onclick='setValue("Товар 3")'>Товар 3</button> <button id="item4" onclick='setValue("Товар 4")'>Товар 4</button> <button id="item5" onclick='setValue("Товар 5")'>Товар 5</button> <script> function setValue(val) { document.querySelector('#info').innerHTML = val; } </script>

JSFiddle example

  • And where are the mistakes? - Zicrael
  • Yes, I just during this JSFiddle wrote, did not see, I agree. ID will remove. - Zicrael
  • IMHO, safer and simpler, instead of setValue ("Item 1") make setValue (this). In order not to become attached to the current label of the button. - test123
  • C this completely agree, but I hope the author will then make a template out of this and display the info with the JSON that he needs. - Zicrael
 <input id="buttonInfo" type="hidden"> ... <!-- Товары --> <button class="item" value="Товар 1">Товар 1</button> <button class="item" value="Товар 2">Товар 2</button> <button class="item" value="Товар 3">Товар 3</button> <script> (function() { function buttonClick() { document.getElementById("buttonInfo").value = this.value; } var buttons = document.querySelectorAll(".item"); for (var i = 0; i < buttons.length; i++) { buttons[i].addEventListener("click", buttonClick); } })(); </script> 

     document.getElementById('btns').addEventListener('click', e => { if (e.target.tagName == 'BUTTON') document.getElementById('info').textContent = e.target.value; }); 
     <p> Вы выбрали товар = <span id="info"></span></p> <br> <div id="btns"> <button value="Товар 1">Товар 1</button> <button value="Товар 2">Товар 2</button> <button value="Товар 3">Товар 3</button> <button value="Товар 4">Товар 4</button> <button value="Товар 5">Товар 5</button> </div>

    • Also the right decision! It is a pity that I can mark only one with a decision = ( - Alexander Sorokin