Как получить value из определенных input

Question

У меня есть несколько одинаковых input, и кнопка сохранить изменения, мне нужно чтоб код понимал какие из множества input я хочу сохранить

.wrap{
  padding-top: 10px;
  
}

<div class="wrap">
  <input type="text" id="name">
  <input type="text" id="surname">
  <input type="text" id="age">
  <button> сохранить </button>
</div>

<div class="wrap">
  <input type="text" id="name">
  <input type="text" id="surname">
  <input type="text" id="age">
  <button> сохранить </button>
</div>

<div class="wrap">
  <input type="text" id="name">
  <input type="text" id="surname">
  <input type="text" id="age">
  <button> сохранить </button>
</div>

Answer 1

Если не вариант просто поменять id, то можно сделать примерно вот так:

const form_1 = document.getElementById('form-1')
const form_2 = document.getElementById('form-2')
const form_3 = document.getElementById('form-3')

const btnSaveForm1 = form_1.querySelector('button')
const btnSaveForm2 = form_2.querySelector('button')
const btnSaveForm3 = form_3.querySelector('button')

btnSaveForm1.addEventListener('click', () => onSaveClick(1))
btnSaveForm2.addEventListener('click', () => onSaveClick(2))
btnSaveForm3.addEventListener('click', () => onSaveClick(3))

function onSaveClick(formNumber) {
  let form;

  switch (formNumber) {
    case 1:
      form = form_1;
      break;
    case 2:
      form = form_2;
      break;
    case 3:
      form = form_3;
      break;
  }

  const name = form.querySelector('#name').value
  const surname = form.querySelector('#surname').value
  const age = form.querySelector('#age').value

  console.log(`
    имя: ${name} \n
    фамилия: ${surname} \n
    возраст: ${age} 
  `)
}

<h1>Форма 1</h1>
<div class="wrap" id="form-1">
  <input type="text" id="name">
  <input type="text" id="surname">
  <input type="text" id="age">
  <button> сохранить </button>
</div>

<h1>Форма 2</h1>
<div class="wrap" id="form-2">
  <input type="text" id="name">
  <input type="text" id="surname">
  <input type="text" id="age">
  <button> сохранить </button>
</div>

<h1>Форма 3</h1>
<div class="wrap" id="form-3">
  <input type="text" id="name">
  <input type="text" id="surname">
  <input type="text" id="age">
  <button> сохранить </button>
</div>

Думаю это самый простой вариант для понимания

UPD
Можно так же передавать саму форму, вместо номера:

const form_1 = document.getElementById('form-1')
const form_2 = document.getElementById('form-2')
const form_3 = document.getElementById('form-3')

const btnSaveForm1 = form_1.querySelector('button')
const btnSaveForm2 = form_2.querySelector('button')
const btnSaveForm3 = form_3.querySelector('button')

btnSaveForm1.addEventListener('click', () => onSaveClick(form_1))
btnSaveForm2.addEventListener('click', () => onSaveClick(form_2))
btnSaveForm3.addEventListener('click', () => onSaveClick(form_3))

function onSaveClick(form) {
  const name = form.querySelector('#name').value
  const surname = form.querySelector('#surname').value
  const age = form.querySelector('#age').value

  console.log(`
    имя: ${name} \n
    фамилия: ${surname} \n
    возраст: ${age} 
  `)
}

Answer 2

Для неизвестного кол-ва блоков:

const forms = document.querySelectorAll('.wrap')

forms.forEach((form, index) => {
  const btnSave = form.querySelector('button')
  btnSave.addEventListener('click', () => onSaveClick(form, index))
})

function onSaveClick(form, index) {
  const formNumber = index + 1
  const name = form.querySelector('#name').value
  const surname = form.querySelector('#surname').value
  const age = form.querySelector('#age').value
  
  console.log(`
    Данные формы №${formNumber}: \n
    name: ${name} \n
    surname: ${surname} \n
    age: ${age} \n
  `)
}

<h1>Форма 1</h1>
<div class="wrap">
  <input type="text" id="name">
  <input type="text" id="surname">
  <input type="text" id="age">
  <button> сохранить </button>
</div>

<h1>Форма 2</h1>
<div class="wrap">
  <input type="text" id="name">
  <input type="text" id="surname">
  <input type="text" id="age">
  <button> сохранить </button>
</div>

<h1>Форма 3</h1>
<div class="wrap">
  <input type="text" id="name">
  <input type="text" id="surname">
  <input type="text" id="age">
  <button> сохранить </button>
</div>

Answer 3

На html странце не может быть двух элементов с однаковым id

/*index.html*/
<div class="wrap" data-wrap="1">
    <input type="text" class="name">
    <input type="text" class="surname">
    <input type="text" class="age">
    <button data-btn="1"> сохранить </button>
  </div>
  
  <div class="wrap" data-wrap="2">
    <input type="text" class="name">
    <input type="text" class="surname">
    <input type="text" class="age">
    <button data-btn="2"> сохранить </button>
  </div>
  
  <div class="wrap" data-wrap="3">
    <input type="text" class="name">
    <input type="text" class="surname">
    <input type="text" class="age">
    <button data-btn="3"> сохранить </button>
  </div>

// script.js
const run = () => {
  const save = (e) => {
    /**
     * Если элемент на который мы кликнули не является кнопкой сохранить -
     * прекращаем выполнение функции
     */
    if(!e.target.hasAttribute("data-btn")) return;
    const btnNumber = e.target.getAttribute("data-btn"); // Значение дата атрибута, кнопки по который мы кликнули
    const targetWrap = document.querySelector(`[data-wrap="${btnNumber}"]`) // .wrap у коготорого data-wrap совпадает с data-btn
    if(!targetWrap) return;  // Если wrap с таким атрибутом не существует - преращаем выполнение функции

    const name = targetWrap.querySelector('.name').value,
          surname = targetWrap.querySelector('.surname').value,
          age = targetWrap.querySelector('.age').value;

    console.log({
      name, surname, age
    })
  };

  window.addEventListener("click", (e) => save(e));
};


run();

БЛОГ НА HUSL

Как получить value из определенных input

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