javascript - 提交具有相同 'name' 属性的多个输入字段

Question

我无法让表单正常工作，因为有多个输入字段(文本)具有相同的名称属性。

在后端，我使用 Node.js 和 Mongoose，使用 POST 方法。这是代码示例:

if(existingFruit) {
        Fruit.findOneAndUpdate({fruit: req.body.fruit}, {
            $push: { price: req.body.price }},

这是有问题的输入字段:

<label for="price">Price</label>
<input type="text" name="price" id="price"/>

基本上，用户将在表单的其他位置输入水果的名称。然后在后端，代码查找数据库以查看该水果是否在数据库中。如果是(existingFruit)，则执行一个函数。此函数将获取用户输入的价格，并将其作为数组添加到数据库中。

这个表单工作得很好。价格将以数组形式输入数据库(在我的架构中设置，为简单起见，此处未显示)。

现在，请注意“name”属性，它等于价格。假设我对表单执行以下操作:

<label for="price1">Price</label>
<input type="text" name="price" id="price1"/>

<label for="price2">Price</label>
<input type="text" name="price" id="price2"/>

现在我的表单允许用户输入水果的 2 个价格。两者具有相同的价格名称属性。此表单不会提交；它总是会给我一个错误。

我不知道如何/在哪里解决这个问题。

Answer 1

您应该为每条记录创建一个 json 对象，并将对象数组发送到后端。并根据需要在 node.js 中访问它

或者如果是单维数组，可以直接生成数组

类似于

var myPrices = [];
function createArray() {
    $("input[name=price]").each(function() {

        var price = $(this).val();

        myPrices.push(price);
    });

    console.log(myPrices);
    return myPrices
}

是的，在多个输入字段中使用相同的名称和 ID 是一种不好的做法。

更好的方法是，

您将有一对排成一排。保持一键动态添加此类行。

最后，当用户完成后，将每一行创建一个 json 对象:

{
    name: 'FRUITNAME',
    price : 'PRICEOFFRUIT'
}

创建此类对象的数组，然后将其发送到服务器端。