Автоматическое изменение полей формы

Есть как минимум 2 формы (их может быть и больше)

Стандартные поля: input'ы,textarea

Так вот в чём вопрос! Когда меняешь в поле любое значение (value) в одной форме,нужно чтоб это значение менялось в этом поле в других формах.

Целый день бьюсь над задачей, искал на stackoverflow, ничего подобного не нашёл

Пробовал нечто подобное, но суть в том, что если ты меняешь в первой форме textarea, то и во всех остальных он меняется, но если меняешь значение textarea во второй форме, либо в другой (не в первой), то, конечно же, ничего не происходит, а нужно сделать так, чтоб не было разницы какую меняешь форму.

var form = document.querySelector('form');
var textarea = form.querySelector('textarea');

// вешаем обработчик на изменение в textarea первой формы
textarea.addEventListener('input', function () {
    form = document.querySelectorAll('form'); // берём все формы

    for (var i = 0; i < form.length; i++) { // перебираем формы
        var textarea2 = form[i].querySelector('textarea');
        textarea2.value = textarea.value;
    }
});

Помогите, пожалуйста!


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

Автор решения: Aziz Umarov

Сделайте так

let textareas = form.querySelectorAll('textarea');

// вешаем обработчик на изменение в textarea первой формы
 [...textareas].forEach(textarea => textarea.addEventListener('input', function () {
    let form = document.querySelectorAll('form'); // берём все формы

    for (var i = 0; i < form.length; i++) { // перебираем формы
        var textarea2 = form[i].querySelector('textarea');
        textarea2.value = textarea.value;
    }
}))
→ Ссылка