时间戳

首页 > 解决方案 > 许多相同的输入-> 一个请求的表单/多个请求的多个表单？

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

问题描述

我正在研究具有相同属性和（由于结构）的<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>

我期望服务器将使用多个数据作为数组解析请求

标签： javascripthtmlformssemantic-markup

解决方案

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

name => value
name2 => value2

因此，如果您发送具有相同名称的表单，则会产生冲突。

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

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

推荐阅读