Как изменять названия индексов массивов в атрибуте name поля input?

Question

[FriJ]

Есть такая структура:

<select>
	<option value="type1">Цемент</option>
	<option value="type2">Бетон</option>
</select>

<input placeholder="Изменить название индекса name_arr1"> //Тут мы изменяем индекс name_arr массивов внутри атрибута name
<input placeholder="Изменить название индекса name_arr2">
<input placeholder="Изменить название индекса name_arr3">

<input placeholder="Изменить название индекса url1"> //Тут мы изменяем индекс url массивов внутри атрибута name
<input placeholder="Изменить название индекса url2">
<input placeholder="Изменить название индекса url3">

<input name='tovar[type][name_arr1][url1]' value='url'> //Тут мы вставляем ссылки
<input name='tovar[type][name_arr2][url2]' value='url'>
<input name='tovar[type][name_arr3][url3]' value='url'>

Как мне реализовать:

• select, который может менять название индекса type
  
• Поле для каждого input, который меняет название индекса name_arr в зависимости от введенного названия
  
• Поле для каждого input, который меняет название индекса url в зависимости от введенного названия
  

Answer 1

[0xD34F]

Добавляете элементам data-атрибуты, в зависимости от того, за какую часть имени отвечают их значения. Слушаете событие input - собираете значения, из значений собираете имена. Как-то так:

<select data-prop="type">
  <option hidden></option>
  <option value="type1">hello, world!!</option>
  <option value="type2">fuck the world</option>
  <option value="type3">fuck everything</option>
</select>
<br>
<input placeholder="name1" data-prop="name">
<input placeholder="name2" data-prop="name">
<input placeholder="name3" data-prop="name">
<br>
<input placeholder="url1" data-prop="url">
<input placeholder="url2" data-prop="url">
<input placeholder="url3" data-prop="url">
<br>
<input class="value" disabled>
<input class="value" disabled>
<input class="value" disabled>

const getValues = prop =>
  Array.from(document.querySelectorAll(`[data-prop="${prop}"]`), n => n.value);


document.addEventListener('input', e => {
  if (!e.target.dataset.prop) {
    return;
  }

  const type = getValues('type')[0];
  const names = getValues('name');
  const urls = getValues('url');

  document.querySelectorAll('.value').forEach((n, i) => {
    n.name = n.value = `xxx[${type}][${names[i]}][${urls[i]}]`;
  });
});