JS Узнать, в каком конкретно input'e произошло изменение

Question

Мне нужно сохранять поля, которые редактирует пользователь в бд. Как я могу узнать, какое именно поле изменил пользователь? У меня есть форма с тремя или больше полями для ввода:

<form class="contact-form" method="post">
    <div class="modal">
      <input name="1" id="postcode-input"><br>
      <input name="2" id="postcode-input"><br>
      <input name="3" id="postcode-input"><br>
      <!--- И так далее -->
    </div>
</form>
<div class="form-status-holder"></div>

Я могу отследить их изменения следующим скриптом:

var timeoutId;
$('.contact-form #postcode-input').on('input propertychange change', function() {
    console.log('Textarea Change');
    saveToDB();
    clearTimeout(timeoutId);
});

Но, как узнать в каком конкретно input'e произошло изменение? Например, если в input'e с name="3", то вывести это в консоль. Заранее я не знаю, сколько у меня будет input'ов, но id у всех одинаковый, разные только name.

Answer 1

ну вы почти все сделали правильно, только функция внутри метода on может содержать параметры из которых и понятно, какой именно элемент получил событие change

https://api.jquery.com/change/

вместо function() использовать function(event) и event.target - это то, что вам нужно, например вы id или class можете получить на основании которого будете делать дальнейшие выводы

https://api.jquery.com/event.target/

Answer 2

Одинаковых айди быть не должно.

function saveToDb(data) {
  console.log(`Saved...${data}`);
}

[...document.querySelectorAll('.contact-form input')].forEach(input => {
  input.addEventListener('input', () => {
    console.log('input triggered:', input.name);
    saveToDb(input.value);
  });
});

<form class="contact-form" method="post">
    <div class="modal">
      <input name="1" id="postcode-input"><br>
      <input name="2" id="postcode-input"><br>
      <input name="3" id="postcode-input"><br>
      <!--- И так далее -->
    </div>
</form>
<div class="form-status-holder"></div>

Answer 3

$('.contact-form .modal input').on('input propertychange change', function() {
    console.log(this.name);
});

$('.contact-form input').on('input propertychange change', function() {
  console.log(this.name, this.value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="contact-form" method="post">
  <input name="test1" />
  <input name="test2" />
</form>

БЛОГ НА HUSL

JS Узнать, в каком конкретно input'e произошло изменение

Ответы (3 шт):