使用 jQuery 获取带有数据的 HTML答案

【问题标题】：Getting HTML with the data using jQuery使用 jQuery 获取带有数据的 HTML
【发布时间】：2011-07-04 05:54:19
【问题描述】：

我有一个包含许多元素（例如 textarea、input、select）的表单，在用户输入一些数据后，这些元素的状态应该会改变。

例如，input[type="radio"] 元素将具有checked="checked" 属性，如果用户已选中它。 input[type="text"] 元素的 value 属性将包含用户输入的文本。

问题是$('#form1').html()返回的html字符串不包含这些数据。

随意看看这个例子：

可以看到无论你输入什么，返回的html都是一样的（没有属性数据）。

有没有简单的方法来收集 html 包括它们的状态？

提前致谢。

【问题讨论】：

【解决方案1】：

使用下面的代码通过 jQuery 获取输入类型文本的值

alert($("input:text").val())

【讨论】：

【解决方案2】：

也许您可以使用 'onblur' 事件处理程序在您离开时设置元素的值

【讨论】：

【解决方案3】：

您应该使用以下方法获取值：

$('#form1').find(':input').val();
$('#form1').find(':radio[name=gender]:checked').val();

如果您有多个输入，那么您可以过滤它们的名称或类别，甚至是 ID。然后您需要使用.find(':input[name=input_field_name]') 选择输入。我的建议是：如果要使用表单，请使用 name 属性而不是其他属性。

【讨论】：

【解决方案4】：

人们通常使用$('#form1').serialize() 来获取值。如果html() 没有同时返回源和数据，我认为除了通过查看数据手动构建完整的 html 之外，您没有什么可以做的。

现场演示： http://jsfiddle.net/cmNmu/6/

【讨论】：

【解决方案5】：

使用gnarf编写的jQueryformhtml插件：

输入元素的变化可以反映在formhtml()返回的html字符串中。

非常感谢大家。

【讨论】：