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

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 中创建很多表单。