如何使用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']中创建一个包含所有值的数组。