jquery - jQuery：html() 函数以表单形式获取旧数据

Question

我正在使用 jQuery 读取 HTML 页面中的数据。在该页面上，我有一个<form>元素，其中包含一些<input>标签供用户输入其值。初始化时，此表单具有这些元素
的一些默认值。<input>当我提交此表单时，我使用该html()方法获取此页面当前状态的 HTML 字符串，但我不知道为什么此结果字符串仍然包含旧值（默认输入值），而不是新值。
有没有办法<input>在调用之前更新或持久化用户输入的值到这些元素html()？如何使用 jQuery 方法获取包含最新值的字符串？
非常感谢！

Answer 1

但是，您尝试做的事情很奇怪，但您只需要更新表单元素的 value 属性。可以使用以下代码完成（将其放入表单submit处理程序中）：

$("form input").attr("value", function() {
    return this.value;
});

演示：http: //jsfiddle.net/BXha6/

Answer 2

默认情况下，jQueryhtml()函数将保留defaultValueanddefaultChecked属性，而不是使用当前值/选择（就像 JavaScriptinnerHTML一样）。要解决这个问题，您需要首先使用 jQuery prop()：阅读关于 prop() 的文档。

例如，给定代码：

<form action='/'>
   <input type='radio' value='1' checked name='first' />
   <input type='radio' value='2' name='first' />

   <input type='checkbox' value='yes' />

   <input type='text' value='Start Text' name='second' />
</form>

然后

   $('form').html()

无论您添加/选择/修改了什么值，都将始终输出该确切代码。

为了解决这个问题，只需运行一个函数将元素的值转换为属性：

$("form input[type='radio']").each(function(){
   if (this.checked){
      $(this).prop("defaultChecked",true);
   } else {
      $(this).prop("defaultChecked",false);
   }
});
$("form input[type='checkbox']").each(function(){
   if (this.checked){
      $(this).prop("defaultChecked",true);
   } else {
      $(this).prop("defaultChecked",false);
   }
});
$("form input[type='text']").each(function(){
   $(this).prop("defaultValue",$(this).val());
});

alert( $(form).html() ); //or var the_code = $(form).html();

您现在将拥有 HTML，因为您当前的页面状态正在显示它。

Answer 3

如果您正在寻找如何执行该元素类型，则 textarea 位会有所不同：

 $("textarea").html( function() {
    return this.value;
});

http://jsfiddle.net/BXha6/7/