Question

我有一个产品注册表单，允许用户通过单击“添加产品”添加其他产品字段。当用户单击添加产品时，Javascript会在现有div中创建新产品字段。

我目前最多允许在表单上添加10个产品，因此我设置了这样的div结构：

<div id="product1"></div>
<div id="product2"></div>
<div id="product3"></div> etc...

每个产品包装盒都有一个空的div，可以由用户添加。我使用Javascript的innerHTML方法来填充div。

关于我的问题：如何允许一次添加无限数量的产品？显然，我当前的设置不支持这个，因为我需要为每个潜在产品硬编码单独的div，所以Javascript有一个特定的位置来删除更多的数据。

注意：在有人建议使用单个div并在其中添加新数据之前，这不起作用。遗憾的是，只要通过附加如下数据将另一个字段添加到div中，就会清除在先前字段中输入的所有数据：

document.getElementById('product').innerHTML += <input name="product">

Answer 1

您可以轻松地动态添加更多DIV。我使用Prototype：

$("someContainerDiv").insert(new Element("div", { id: "product_"+prodId, 'class':'prod' }))

然后将您的内容放入$("product_"+prodId).innerHTML。

Answer 2

我有一句话要说jQuery：）

示例（为您的表单动态构建输入）：

output = '';
for(i in products){
   output += '<div id="product_' + products[i].id + '">';
   output += '<input type="text" name="products[' + products[i].id + '][name]">';
   output += '<input type="text" name="products[' + products[i].id + '][price]">';
   output += '</div>';
}
$('#products_list').append(output);

如何使用Javascript构建无限可伸缩的表单？

2 个答案: