如何使用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構建無限可縮放的表單？

回答

相關問題