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

Question

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--;
    });
});

问题是添加多字段后名称属性仅适用于第一个字段然后名称属性数组不适用于多字段请帮助我解决此错误

Answer 1

您在页面上覆盖了相同的元素。因此，任何以前的 size[] 或 sku[] 或其他任何内容都将被删除，以支持被覆盖的元素。

您可以通过在数组中指定确切的名称来解决此问题。在最初加载的页面上是这样的：

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

然后在您的 JS 中，在数组中使用您的 var x 值（尽管从 2 开始）：

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);
    }
}); 

您必须更新您的 click 函数 inside 的 fieldHTML var 以接受数组中的变量，因为 x 每次都会递增。