如何使用jQuery創建動態表單

Question

如何使用jQuery創建動態表單。 例如，如果我必須重復html塊3次並一次一一地顯示它們，那么我又該如何獲取此動態表單值。

<div>
    <div>Name: <input type="text" id="name"></div>
    <div>Address: <input type="text" id="address"></div>
</div>

Answer 1

要將HTML插入表單3次，您可以簡單地循環執行。

HTML：

<form id="myForm"></form>

jQuery的：

$(function() {
    var $form = $('#myForm');  // Grab a reference to the form

        // Append your HTML, updating the ID attributes to keep HTML valid
    for(var i = 1; i <= 3; i++) {
        $form.append('<div><div>Name: <input type="text" id="name' + i + '"></div><div>Address: <input type="text" id="address' + i + '"></div></div>')
    }
});

至於獲取價值，如何實現將取決於您的意圖。 jQuery可以序列化整個表單，或者您可以選擇單個輸入值。

.append() - http://api.jquery.com/append/

Answer 2

這是一個相當廣泛的問題，感覺很像“做我的工作”，而不是“幫助我解決這個問題”。 話雖這么說，一個通用的問題就會產生一個通用的答案。

您可以使用append（）方法添加新的地址行，並將其綁定到當前行的模糊效果（盡管看起來很亂），或者使用一組+/-按鈕來允許您從表單中添加和刪除行。 如果要在服務器端使用PHP處理表單，則可以這樣命名字段：

<input type='text' name='address[]' />

並且php將在$ _POST ['address']中創建一個包含所有值的數組。