Замена Value по клику?

209

09 мая 2018, 00:52

Есть 1 форма обратной связи во всплывающем окне. И несколько кнопок вызова этого всплывающего окна (товары).

Как при отправке формы понять, с какой кнопки она была вызвана?

При этом, не делая на каждую кнопку отдельное всплывающее окно и форму.

Я где-то видел, что привязывают на кнопки скрипт: onclick="скрипт", но браузер ругается, думая что там кликджекинг и прочие вредоносные скрипты.

Песочница с заготовкой 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>

Answer 1

Я думаю неплохой вариант будет таким:

   <!-- Вот здесь информация о товаре -->
    <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

Answer 2

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

Answer 3

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>