Question

我有一个可以动态创建输入的表单。

例如：

<form>
    <input name="item[0][name]">
    <input name="item[1][name]">
</form>

0和1是商品的ID。

请注意，0和1可以是15和49，甚至可以是520，854和2

既没有订单也没有排序，而且只有两个项目也没有限制。

问题是：

“在将它们发送到后端之前，获取在这些输入中键入的值的最佳方法是什么？”

我能想到的唯一方法是在生成表单时添加id，但这似乎一点也不优雅。

如果您找不到更好的方法，那将很可爱=）

Answer 1

您可以使用document.querySelectorAll()和属性选择器

function submit() {
  let inputs = document.querySelectorAll('input[name*=item]');
  let values = Array.from(inputs).map(({value})=>value);
  console.log(values);
}

<form>
    <input name="item[0][name]">
    <input name="item[1][name]">
</form>

<button onclick="submit()">Sumbit</button>

Answer 2

您可以使用HTMLFormElement.elements属性。

const formInputs = document.getElementById('a-form').elements
const dataObject = {}

for (let i = 0; i < formInputs.length; i++) {
  dataObject[formInputs[i].name] = formInputs[i].value
}

console.log(dataObject)

<form id="a-form">
  <input type="text" name="item[0][name]" />
  <input type="text" name="item[1][name]" />
  <input type="text" name="item[2][name]" />
</form>

获取将在动态生成的输入中键入的值的最佳方法是什么？

2 个答案: