javascript - 许多相同的输入 -> 一个请求的表单/多个请求的多个表单？

Question

我正在处理<form>有多组<input>具有相同的属性name='product-code'和name='amount' (因为结构)。 为了更好地理解，示例:您可以在表单中选择要添加到购物篮中的一种特定产品的颜色和数量，但我想从目录发送产品代码(因为该产品的每种颜色是目录中的另一项)而不是发送颜色名称。 我试图理解它应该如何在语义上正确完成和序列化。应该是一份表格和一份帖子请求，还是多张表格和很多帖子请求？你有什么看法？

<form>
  <div>
    <input type="text" name="product-code" value="ST912600">
    <input type="number" name="amount" value="2">
  </div>
  <div>
    <input type="text" name="product-code" value="ST821806">
    <input type="number" name="amount" value="0">
  </div>
  <div>
    <input type="text" name="product-code" value="ST467165">
    <input type="number" name="amount" value="1">
  </div>
  <div>
    <input type="text" name="product-code" value="ST348499">
    <input type="number" name="amount" value="1">
  </div>
  <div>
    <input type="text" name="product-code" value="ST545081">
    <input type="number" name="amount" value="0">
  </div>
  <div>
    <input type="text" name="product-code" value="ST430287">
    <input type="number" name="amount" value="0">
  </div>
  <div>
    <input type="text" name="product-code" value="ST988144">
    <input type="number" name="amount" value="4">
  </div>
  <button type="submit">Send</button>
</form>

我期望服务器将包含多个数据的请求解析为数组

Answer 1

您不能在 form 标记中使用相同的名称。将您的表单可视化为关联数组。

name => value
name2 => value2

因此，如果您发送同名表单，就会产生冲突。

但是您可以使用简单的形式，根据需要更改 name 属性，并设置一个名为 Product-code 的类。 preventDefault 在提交按钮上使用 JS 并使用 getElementsByClassName 并获取他的值等。保存在数组中并创建一个循环以使用 formElt.submit 逐一提交() 函数。

或者在 HTML 中创建大量表单。