Question

我有多行的表单元素。命名这些元素的最佳方法是什么，以便我可以读取表单中的所有值并生成带有值的JSON？由于HTML不支持Arrays，最佳替代方案是什么？

每行有2个文本元素和1个Select元素。这些行是动态生成的。

编辑：基本上我想要一种简单的方法将我的数据转换为JSON，以便我可以将它传递给服务。

我的每一行都是这样的

<tr><td><input type="text"></input></td>
<td><select><option>Exact</option><option>Regex</option><option>Action</option></select></td>
<td><input type="text"></input></td></tr>

<tr><td><input type="text"></input></td>
<td><select><option>Exact</option><option>Regex</option><option>Action</option></select></td>
<td><input type="text"></input></td></tr> .....

Answer 1

我认为我理解。您只需更改HTML：

<div class="form"> // I prefer getting a namespaced super element
<div class="row">
    <input name="name[0][yo]"/>
    // Other elements
</div>
<div class="row">
    <input name="name[1][yo]"/>
    // other elements
</div>
</div>

然后在JQuery中：

$.post('to_my_page', $('.form input, .form select, .form textarea').serialize(), function(data){
    // Done
}, 'json');

这应该允许您将输入行数组发布到另一个页面。

这当然是一个非常简单和基本的例子。

Answer 2

一个很好的方法是对值进行修改，例如，你只是在一个范围内使用文本换行，然后当你需要使JSON迭代行并从中获取数据时，即：

var elements = []
$('#formId tr').each(function (i, e){
    elements.push({
        ElementTd1: $('#td1').val()    
   })  
}

Answer 3

要从表单中提取所有数据，您只需使用jQuery's serializeArray()方法，就像这样：

$('form').serializeArray();

jsFiddle example

如何读取多行Form元素？

3 个答案: