如何通过 jQuery 获取表单 html()，包括更新的值属性？

Posted 2023-05-08

【中文标题】如何通过 jQuery 获取表单 html()，包括更新的值属性？

【英文标题】：How to get form html() via jQuery including updated value attributes?

【发布时间】：2013-05-24 23:30:22

【问题描述】：

是否可以通过 .html() 函数获取具有更新值属性的表单的 html？

（简化的）HTML：

<form>
    <input type="radio" name="some_radio" value="1" checked="checked">
    <input type="radio" name="some_radio" value="2"><br><br>
    <input type="text" name="some_input" value="Default Value">
</form><br>
<a href="#">Click me</a>

jQuery：

$(document).ready(function() 

    $('a').on('click', function() 
        alert($('form').html());
    );
);

这是我正在尝试做的一个示例： http://jsfiddle.net/brLgC/2/

在更改输入值并按下“点击我”后，它仍会返回具有默认值的 HTML。

如何通过 jQuery 获取更新后的 HTML？

【问题讨论】：

我不这么认为，因为这些值从来没有用 JS 设置，它们只是按照硬编码的方式返回。您可以随时使用.serialize()

因为您正在提醒实际的 HTML ...您键入的内容不会添加到构建页面的 HTML 中。可能需要对每个项目进行循环，获取 html 和 value，并将其组合起来

【参考方案1】：

如果你真的必须有 HTML，你需要手动更新“value”属性： http://jsfiddle.net/brLgC/4/

$(document).ready(function() 

    $('a').on('click', function() 
        $("input,select,textarea").each(function() 
           if($(this).is("[type='checkbox']") || $(this).is("[type='checkbox']")) 
             $(this).attr("checked", $(this).attr("checked"));
           
           else 
              $(this).attr("value", $(this).val()); 
           
        );
        alert($('form').html());
    );
);

【讨论】：

我想那是唯一的解决方案......但是我想单选按钮和复选框有点棘手......

更新了收音机和复选框的解决方案。相同的主体，除了使用选中的属性而不是值。当然，这很乱，但通常调用 .html() 是。

正如上面提到的@tymeJV，serialize() 也可以使用，这样会更干净一些。

.serialize() 仅提供键/值对作为字符串。他想要网页中的文字 HTML。

我已将您的脚本添加到我所有表单字段的更改侦听器中

【参考方案2】：

RGraham 的答案对我不起作用，因此我将其修改为：

$("input, select, textarea").each(function () 
    var $this = $(this);

    if ($this.is("[type='radio']") || $this.is("[type='checkbox']")) 
        if ($this.prop("checked")) 
            $this.attr("checked", "checked");
        
     else 
        if ($this.is("select")) 
            $this.find(":selected").attr("selected", "selected");
         else 
            $this.attr("value", $this.val());
        
    
);

【参考方案3】：

Lachlan 的作品“几乎”完美。问题是当表单被保存然后恢复然后再次保存时，收音机和复选框不会取消选中，而是继续复合。下面的简单修复。

$("input, select, textarea").each(function () 
    var $this = $(this);

    if ($this.is("[type='radio']") || $this.is("[type='checkbox']")) 
        if ($this.prop("checked")) 
            $this.attr("checked", "checked");
         else 
            $this.removeAttr("checked");
        
     else 
        if ($this.is("select")) 
            $this.find(":selected").attr("selected", "selected");
         else 
            $this.attr("value", $this.val());
        
    
);

【讨论】：

不使用 textarea

【参考方案4】：

与 textarea 一起工作的版本如下

$("input, select, textarea").each(function () 
    var $this = $(this);

    if ($this.is("[type='radio']") || $this.is("[type='checkbox']")) 
        if ($this.prop("checked")) 
            $this.attr("checked", "checked");
         else 
            $this.removeAttr("checked");
        
     else 
        if ($this.is("select")) 
            $this.find(":selected").attr("selected", "selected");
         else if ($this.is("textarea")) 
                $this.html($this.val());
         else 
            $this.attr("value", $this.val());
        
    
);