Javascript 名称属性在“添加/删除输入字段”功能中不起作用

html

<div class="field_wrapper">   
    <div>
        <input id="size" type="text" name="size[]" value="" placeholder="Size" style="width:120px;" required="" />
        <input id="sku" name="sku[]" type="text" value="" placeholder="SKU" style="width:120px;" required="" />
        <input id="price" type="numver" name="price[]" value="" placeholder="Price" style="width:120px;" required="" />
        <input id="stock" type="number" name="stock[]" value="" placeholder="Stock" style="width:120px;" required="" />
        <a href="javascript:void(0);" class="add_button" title="Add field">add</a>
</div>
</div>

jquery代码

$(document).ready(function(){
   var maxField = 10;
    var addButton = $('.add_button');
    var wrapper = $('.field_wrapper');
    var fieldHTML = '<div><br><input type="text" name="size[]" style="width:120px" placeholder="Size"/>   <input type="text" name="sku[]" style="width:120px" placeholder="SKU"/>   <input type="text" name="price[]" style="width:120px" placeholder="Price"/>   <input type="text" name="stock[]" style="width:120px"  placeholder="Stock"/><a href="javascript:void(0);" class="remove_button">remove</a></div>';
    var x = 1;
    $(addButton).click(function(){
        if(x < maxField){ 
            x++;
            $(wrapper).append(fieldHTML);
        }
    }); 
    $(wrapper).on('click', '.remove_button', function(e){
        e.preventDefault();
        $(this).parent('div').remove();
        x--;
    });
});

$（文档）.ready（函数（）{
var maxField=10；
var addButton=$（'.add_button'）；
var wrapper=$（'.field_wrapper'）；
var fieldHTML='
'；
var x=1；
$（添加按钮）。单击（函数（）{
如果（x

---

问题是，添加多个字段后，名称属性仅对第一个字段有效，而名称属性数组对多个字段无效。请帮助我解决此错误。

您在页面上过度写入了相同的元素。因此，任何以前的

size[]

或

sku[]

或任何东西都将被删除，以支持过度编写的元素

您可以通过在数组中指定确切的名称来解决这个问题。在最初加载的页面上类似于以下内容：

<input id="size" type="text" name="size[1]" value="" placeholder="Size" style="width:120px;" required="" />

---

您必须更新click函数中的

字段HTML

变量，以接受数组中的变量，每次增量为

x

。

仍不工作请编写完整代码先生，我使用您编辑但仍不工作的相同条目编写了完全相同的代码。它只选择了第一个条目[size]=>Array（[1]=>h）[sku]=>Array（[1]=>w）[price]=>Array（[1]=>2）[stock]=>Array（[1]=>1）这是@Watercayman``var maxField=10的输出；var addButton=$（'.add_button'）；var wrapper=$（'.field_wrapper'）；var fieldHTML=''；var x=2$（addButton）.单击（函数（）{if（x'；$（包装器）.append（fieldHTML）；}}）$（包装器）.on（'click'，'.remove_按钮），函数（e）{e.preventDefault（）；$（this.parent（'div'）.remove（）；x--；}）```好的，我们从输出中知道，代码正确地将数组添加到带有索引的页面上，因为它从1开始，而不是0。这意味着答案中的代码是正确的。但是，在发送时，页面似乎看不到整个数组。如何将表单数据发送回控制器？如果通过JS，您需要确保它看到的是动态加载的内容（

$（document）…

），而不是静态页面内容，因为静态页面内容只有一组输入。当您使用按钮添加一组输入时，如果它正确添加了一组新输入，则JS代码工作正常。问题必须是发送内容的内容没有看到动态添加的代码。这是第二个失败，但是现在您已经有了不再过度书写的附加文本，您可以通过为发送表单数据的代码添加

$（document）

范围来解决这个问题，以获取新添加的表单元素。

var fieldHTML ='';
var x = 2;
$(addButton).click(function(){
    if(x < maxField){ 
        x++;
        fieldHTML = '<div><br><input type="text" name="size['+x+']" style="width:120px" placeholder="Size"/>   <input type="text" name="sku['+x+']" style="width:120px" placeholder="SKU"/>   <input type="text" name="price['+x+']" style="width:120px" placeholder="Price"/>   <input type="text" name="stock['+x+']" style="width:120px"  placeholder="Stock"/><a href="javascript:void(0);" class="remove_button">remove</a></div>';
        $(wrapper).append(fieldHTML);
    }
});