Как объединять значения двух инпутов в один в разных формах?

Question

[Азат Киберов]

Искал код который объединяет с помощью js два инпута в один.
Нашел такой код:

<input id="input1" name="input1"/>
<input id="input2" name="input2"/>
<input id="input3" name="input3" readonly />

<script>
input1.addEventListener('keyup', joinValues, false);
input2.addEventListener('keyup', joinValues, false);

function joinValues(){
    input3.value = input1.value + ' ' + input2.value;
}
</script>

Но с ним невозможно сделать много форм.

Как сделать, чтобы можно было объединить по class, а не id?

Вот так:

<input class="input1" name="input1"/>
<input class="input2" name="input2"/>
<input  class="input3" name="input3" readonly />

Чтобы была возможность сделать много форм, порядка 20 штук.

Answer 1

[0xD34F]

document.addEventListener('input', function(e) {
  const inputsWrapper = e.target.closest('.класс-блоков-которые-содержат-ваши-инпуты');
  if (inputsWrapper) {
    const inputs = [...inputsWrapper.querySelectorAll('input')];
    const lastInput = inputs.pop();
    lastInput.value = inputs.map(n => n.value).join(' ');
  }
});

Comments

[Азат Киберов]

<form>
<div class="input2">
<input class="input1" name="input1"/>
<input class="input1" name="input2"/>
<input class="input1" name="input3" readonly />
<div>
</form>

<form>
<div class="input2">
<input class="input1" name="input1"/>
<input class="input1" name="input2"/>
<input class="input1" name="input3" readonly />
<div>
</form>

<form>
<div class="input2">
<input class="input1" name="input1"/>
<input class="input1" name="input2"/>
<input class="input1" name="input3" readonly />
<div>
</form>

А как сделать это ..Чтобы значение на третьем инпуте изменялось индивидуально в каждой форме..

[0xD34F]

Азат Киберов, мне что, повторить ответ?

[Азат Киберов]

0xD34F, Извините .Вы меня не правильно поняли..Я спросил как сделать чтобы было 20 форм с инпутами наверху пример.На каждой форме 3 инпута .Он изменяет только одну.

[0xD34F]

Азат Киберов, да всё я понял. Это вы явно чего-то не понимаете. Вот вам три варианта дальнейших действий:

1. Вы ищите свой косяк самостоятельно.
   
2. Вы воспроизводите в песочнице свою попытку воспользоваться кодом из ответа, кидаете ссылку сюда, и я указываю вам на ваш косяк.
   
3. Я изготавливаю в песочнице пример, кидаю сюда ссылку, вы путём сравнения моего рабочего варианта с нерабочим своим ищите свой косяк.
   

Какой выбираете?

[Азат Киберов]

Вариант 2 ..

https://jsfiddle.net/rop7jwx6/

[0xD34F]

Азат Киберов, видите там у себя, что в html кое-что выделено цветом? А на полях строки точка? Вот если навести на точку курсор, появится описание косяка.

[Азат Киберов]

0xD34F, Мда уж я поспешил и совершил ошибку я был не прав..Спасибо что помогли .Как говориться поспешишь людей насмешишь.. Тег dIv не был закрыт..