Определение конкретной кнопки в форме

Question

, поэтому я хочу получить определенное значение, если в моей форме нажата кнопка, но каким-то образом она прослушивает все кнопки, а не только кнопки в моей форме.

Вместо приведенного ниже примера JavaScript, я такжепопытался вызвать класс по

$('.modifygap').bind('click', function (e) {

, но в этом примере значение не было установлено правильно.

Вот мой HTML:

<button type="button" id="anotherbutton">Another</button>

<form action="editortoken_information" id="showtoken" method="POST">

    <button class="btn btn-outline-secondary" type="submit" name="modifygap" id="modifygap" class="modifygap"
    value="14" data-value="test">14</button>

    <button class="btn btn-outline-secondary" type="submit" name="modifygap" id="modifygap" class="modifygap" 
    value="15" data-value="test">15</button>

</form>

А вот мой JavaScriptфункция:

$(document.getElementById("showtoken")).ready(function () {
    $("button").click(function (e) {
         e.preventDefault();
         document.getElementById('tokenindex').value = this.getAttribute("data-value");
    })
})

Я думал, что при прослушивании только определенного идентификатора он будет обнаруживать только нажатия кнопок в форме.Но по какой-то причине он слушает все нажатия кнопок.

Answer 1

Используйте event.target.value, чтобы получить значение элемента, по которому щелкнули.

$(document).ready(() => {
  $('.modifygap').bind('click', function (e) {
    console.log('e', e.target.getAttribute("data-value"))
  });  
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="anotherbutton">Another</button>



    <button class="btn btn-outline-secondary modifygap" type="submit" name="modifygap" id="modifygap"
    value="14" data-value="test14">14</button>

    <button class="btn btn-outline-secondary modifygap" type="submit" name="modifygap" id="modifygap" 
    value="15" data-value="test15">15</button>