如何读取多行表单元素？答案

【问题标题】：How to read multiple rows of Form elements?如何读取多行表单元素？
【发布时间】：2012-10-05 11:31:33
【问题描述】：

我在多行中有表单元素。命名这些元素的最佳方法是什么，以便我可以读取表单中的所有值并生成带有这些值的 JSON？由于 HTML 不支持数组，那么最好的选择是什么？

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

编辑：基本上我想要一种简单的方法将我的数据转换为 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> .....

【问题讨论】：

“HTML 不支持数组”是什么意思？
所以如果我有多行表单元素，我可以将元素命名为 textbox[0] textbox[1] 等吗？
当然，您也可以将它们命名为textbox[] 或textbox[name]
并在 Jquery 中运行一个循环来生成 JSON，有什么方法可以自动生成？
您的输入元素没有名称，这是编辑中的错误还是您的 HTML 的实际外观？

标签： javascript jquery html json

【解决方案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');

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

这当然是一个极其简单和基本的例子。

【讨论】：

我对此有所了解，将尝试使用此命名约定并生成 JSON
@monotheist 如果您需要澄清，请告诉我 :)

【解决方案2】：

acoplish 的一种好方法是在值上放置一个 id，例如，您只使用一个文本将其包装在一个 span 中，然后当您需要使 JSON 遍历行并从中获取数据时，即：

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

【讨论】：

【解决方案3】：

要从表单中提取所有数据，您可以简单地使用jQuery's serializeArray() 方法，如下所示：

$('form').serializeArray();

jsFiddle example

【讨论】：