代码之家 › 专栏 › 技术社区 › Cory House

如何使用Javascript构造一个无限可伸缩的表单?

dom html javascript

Cory House · 技术社区 · 16 年前

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

我目前最多允许在表单上添加10个产品,因此我设置了一个div结构,如下所示:

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

对于用户可能添加的每个产品框,我都有一个空div。我使用Javascript的innerHTML方法填充div。

注意:在有人建议使用单个div并向其中添加新数据之前,这是行不通的。遗憾的是,每当通过如下方式向div添加另一个字段时,前面字段中输入的所有数据都会被清除:

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

2 回复 | 直到 7 年前

Diodeus - James MacFarlane 16 年前

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

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

然后把你的东西放进去 $("product_"+prodId).innerHTML .

Jay 16 年前

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

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前