javascript - 如何使用 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/