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

我有一个产品注册表格，允许用户通过点击“添加产品”添加其他产品字段。当用户点击添加产品时，Javascript在现有div中创建新产品字段。如何使用Javascript构建无限可缩放的表单？

我目前允许最多被窗体上加入10个产品，因此我设置一个div结构是这样的：

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

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

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

注意：在有人建议使用单个div并向其中添加新数据之前，这是行不通的。

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

来源

2008-12-12 Cory House

可以动态轻松添加更多的DIV：可悲的是，每当另一个字段添加到div通过附加数据这样在以前的字段中输入的所有数据将被清除。我用Prototype：

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

然后把你的内容$("product_"+prodId).innerHTML。

来源

2008-12-12 13:47:42

啊！好想法！我是否可以通过简单地调用innerHTML在现有div内写入div来创建另一个div？这会在DOM中插入一个新的div吗？我没有在这个项目上使用JS库。 – 2008-12-12 13:57:35

是的，你当然可以。 :) – 2008-12-12 14:07:08

我有一句话说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);

来源

2008-12-12 13:53:57 Jay

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

回答

相关问题