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

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 attribut，并设置一个名为product-code的类。 preventDefault在你的提交按钮上使用JS并使用getElementsByClassName并获得他的价值等。保存在一个数组中并创建一个循环，用formElt.submit()函数逐一提交。

或者在HTML中创建很多表单。