javascript - 动态创建和处理多个表单字段组

Question

我正在构建一个小型订单页面(基于 JS 和 PHP)，但在如何处理表单数据方面我有点困惑。在该表单中，用户应该能够订购一种或多种产品，每种产品都有一些单选按钮形式的设置。为了使每个输入字段都唯一，我添加了一个小的 JS 片段，使每个输入名称值都不同(添加新产品时)，就像这样 -

    newUnit = newUnit.replace(/name="unitPrice/g, 'name="unitPrice' + i);
    newUnit = newUnit.replace(/name="body/g, 'name="body' + i);
    newUnit = newUnit.replace(/name="details/g, 'name="details' + i);
    newUnit = newUnit.replace(/name="topShelf/g, 'name="topShelf' + i);


<div class="unit">
    <input type="hidden" class="unitPrice" name="unitPrice" value="0" data-price="6900">
    <div class="row">
        <div class="col-sm-3">
            <fieldset class="form-group options-body">
                <legend>Body</legend>
                <div class="form-check">
                    <label class="form-check-label">
                        <input type="radio" class="form-check-input" data-price="0" name="body" value="White Ash" checked>
                        White Ash
                    </label>
                </div>
                <div class="form-check">
                    <label class="form-check-label">
                        <input type="radio" class="form-check-input" data-price="0" name="body" value="Black Ash">
                        Black Ash
                    </label>
                </div>
                <div class="form-check">
                    <label class="form-check-label">
                        <input type="radio" class="form-check-input" data-price="800" name="body" value="Walnut">
                        Walnut (+800)
                    </label>
                </div>
            </fieldset>
        </div>
    </div>
</div>
<div class="unit">
    <input type="hidden" class="unitPrice" name="unitPrice" value="0" data-price="6900">
    <div class="row">
        <div class="col-sm-3">
            <fieldset class="form-group options-body">
                <legend>Body</legend>
                <div class="form-check">
                    <label class="form-check-label">
                        <input type="radio" class="form-check-input" data-price="0" name="body2" value="White Ash" checked>
                        White Ash
                    </label>
                </div>
                <div class="form-check">
                    <label class="form-check-label">
                        <input type="radio" class="form-check-input" data-price="0" name="body2" value="Black Ash">
                        Black Ash
                    </label>
                </div>
                <div class="form-check">
                    <label class="form-check-label">
                        <input type="radio" class="form-check-input" data-price="800" name="body2" value="Walnut">
                        Walnut (+800)
                    </label>
                </div>
            </fieldset>
        </div>
    </div>
</div>

(如果用户添加 1 个以上产品的示例标记，以及运行的 JS 的一部分)

这对于在整个订单步骤中更新价格和设置非常有用，但当我提交数据时，我不确定如何处理不同的产品，因为我无法循环它们，因为它们具有不同的名称。我打赌有更好的方法，有什么想法/方向吗？

表单数据示例

unitPrice=6900&unitPrice=6900&body%5B%5D=White%20Ash&details%5B%5D=Stainless%20steel&topShelf%5B%5D=Wood&firstName=&lastName=&email=&phone=&address=&city=&zip=&country=&firstName2=&lastName2=&email2=&phone2=&address2=&city2=&zip2=&country2=&totalPrice=13800

Answer 1

我不会给出关于如何做到这一点的完整代码，但解释已经足够了。您想要做的是在提交之前修改发送到服务器的数据。您可以为每个字段创建 4 个数组，然后在客户端使用相应的数据初始化它们(注意:也包括空值以维持顺序。)。然后将所有这些数组作为 POST 字段发送。这可以使用 AJAX 查询来处理帖子来完成。在服务器端，您现在可以单独迭代每个数组。这只是答案之一，如果您的服务器中设置了限制，则可能会减少 POST 变量的数量(也许是 64 个，用户可以超出这个限制!)。

希望这有帮助。如果你想要代码版本评论，我会花更多时间在上面。