Добавить прослушиватель изменений в атрибуты данных для нескольких элементов

Question

Скажите, что JS отображает несколько полей ввода, все из которых имеют разные идентификаторы как значение data-id. Как добавить прослушиватели событий ко всем входам, которые имеют атрибут data-id, а затем отправить его на PHP как запрос AJAX?

<input type="text" data-id="${element.id}" class="review" name="review" placeholder="Type your review"/>

xmlHttp.open("GET", "/review=" + << input field value here >>, true);

Answer 1

Вы не указали, какое событие вы хотите прослушать. Я предполагал событие «изменить», но вы можете изменить его на любое другое.

Вы можете выбрать элементы по имени атрибута, используя querySelectorAll и указав имя атрибута в квадратных скобках.

const els = Array.from(document.querySelectorAll('[data-id]'));
for(const el of els) {
  el.addEventListener('change', () => {
    //your ajax code here
  });
}

Answer 2

Вы можете использовать document.querySelectorAll ('input [data-id]') для извлечения всех входных элементов, имеющих "data-id" в качестве атрибута, а затем l oop поверх элементов HTML и добавления обработчика событий к каждому из это выглядит следующим образом:

const elements = document.querySelectorAll('input[data-id]');
elements.forEach(key => {
      key.addEventListener('change', console.log('Event added!!!'));
});

Если вы хотите добавить событие к элементу ввода с определенным значением data-id, вы можете использовать следующий формат, чтобы получить только один элемент:

const id=1;
const specificInput = document.querySelector(`input[data-key="${id}"]`);