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

我正在构建一个小订单页面（基于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） 也许使用PHP来创建字段比使用JavaScript更容易

2） 只需使用循环遍历名称并将其存储到数组中即可：

unitPrice = []; //create array
for($i = 0; $i < 10; $i++)
{
  array_push(unitPrice,$_GET['unitPrice'.$i]); //push value into array
}

单价=[]//创建数组
对于（$i=0；$i<10；$i++）
{
数组_push（单价，$\u GET['unitPrice.$i]）；//将值推入数组
}

1）使用PHP创建字段可能比使用JavaScript更容易

2） 只需使用循环遍历名称并将其存储到数组中即可：

unitPrice = []; //create array
for($i = 0; $i < 10; $i++)
{
  array_push(unitPrice,$_GET['unitPrice'.$i]); //push value into array
}

单价=[]//创建数组
对于（$i=0；$i<10；$i++）
{
数组_push（单价，$\u GET['unitPrice.$i]）；//将值推入数组
}

我不打算给出如何做到这一点的完整代码，但解释已经足够了。您要做的是在提交之前修改发送到服务器的数据。您可以为每个字段创建4个数组，只需在客户端用各自的数据初始化它们（注意：也包括空值以保持顺序）。然后将所有这些数组作为POST字段发送。这可以使用AJAX查询来处理帖子。在服务器端，现在可以分别迭代每个数组。如果您的服务器中设置了POST变量的限制（可能是64个，用户可以超过这个限制！），那么这只是一个可能减少POST变量数量的答案

---

希望这有帮助。如果你想要一个代码版本注释，我会花更多的时间在上面

我不会给出一个完整的代码来说明如何做到这一点，但是解释已经足够了。您要做的是在提交之前修改发送到服务器的数据。您可以为每个字段创建4个数组，只需在客户端用各自的数据初始化它们（注意：也包括空值以保持顺序）。然后将所有这些数组作为POST字段发送。这可以使用AJAX查询来处理帖子。在服务器端，现在可以分别迭代每个数组。如果您的服务器中设置了POST变量的限制（可能是64个，用户可以超过这个限制！），那么这只是一个可能减少POST变量数量的答案

---

希望这有帮助。如果你想要一个代码版本注释，我会花更多的时间在上面

应该使用数组作为表单字段名，如unitPrice[]，而不是现在使用的“'unitPrice'+i”。然后，您可以在php中将表单字段作为数组进行迭代，例如

$unitPrice=$\u POST['unitPrice']

将为您提供一个单价数组，然后您可以使用

foreach

进行迭代。这有意义吗？

您应该使用数组作为表单字段名，如unitPrice[]，而不是现在使用的“'unitPrice'+i”。然后，您可以在php中将表单字段作为数组进行迭代，例如

$unitPrice=$\u POST['unitPrice']

将为您提供一个单价数组，然后您可以使用

foreach

进行迭代。这有意义吗？

谢谢，但这不是问题所在——问题在于提交表单后如何处理它们。他们有不同的名字，不知道如何循环（有效地）通过。谢谢，但这不是问题-这是关于处理他们一旦表单提交。它们有不同的名称，但不确定如何（有效地）循环。不需要代码示例，我有点了解其中的诀窍。好提示！很高兴能帮助您：）您可能想查看jquery.form.plugin-它使您能够在提交前使用

beforeimit

选项修改表单字段。不需要代码示例，我有点了解它的诀窍。好提示！很高兴为您提供帮助：）您可能想查看jquery.form.plugin-它使您能够在提交前使用

beforeSubmit

选项修改表单字段。您的意思是使用表单数组？不幸的是，它不能与单选按钮一起工作-以前产品中的单选按钮将停止工作。例如，当第二个产品生成相同的按钮内容时，第一个产品不起作用。那么使用多维数组。你是说使用表单数组？不幸的是，它不能与单选按钮一起工作-以前产品中的单选按钮将停止工作。例如，当第二个产品生成相同的按钮内容时，第一个产品不起作用。然后使用多维数组。