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

时间:2008-12-12 13:40:56

标签: javascript html dom

我有一个产品注册表单,允许用户通过单击“添加产品”添加其他产品字段。当用户单击添加产品时,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"> 

2 个答案:

答案 0 :(得分:4)

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

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

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

答案 1 :(得分:0)

我有一句话要说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);
豫ICP备18024241号-1