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

如何使用jQuery创建动态表单

2 个答案: