提交时将 HTML 复制到 textarea答案

【问题标题】：Copy HTML into textarea on submit提交时将 HTML 复制到 textarea
【发布时间】：2012-10-17 18:36:54
【问题描述】：

我有一个表单，其中包含多个输入块，默认值由 PHP 分配，我想将其中一个块的 HTML 标记传递给 PHP 脚本。这是我的表单的修改后的 sn-p 以举例说明标记：

<form action="/page/do_work/job_number" id="work_form">
    <textarea style="display: none;" name="markup" id="markup"></textarea>
    <div id="block_1">
        <table>
            <tr>
                <td><input type="text" value="123" /></td>
                <td><input type="text" value="123" /></td>
            </tr>
        </table>
    </div>
    <div id="block_2">
        <table>
            <tr>
                <td><input type="text" value="abc" /></td>
                <td><input type="text" value="abc" /></td>
            </tr>
        </table>
    </div>
</form>

我正在用一些 jQuery 监听表单的提交，这样我就可以将表格的 HTML 复制到 textarea 中。：

$('#work_form').submit(function(){
    // Snatch the markup
    var markup = $('#block_1', '#work_form').html(); 
    // Place it into the textarea
    $('#markup', '#work_form').html( markup );
    // Move on
    return true;
});

问题是修改后的值没有被复制到文本区域。例如，如果我将值从“abc”更改为“xyz”，则传递给 textarea 的标记仍然显示“abc”。任何帮助将不胜感激。

编辑： 使用.html() 或.val() 都将标记添加到文本区域，但我想知道为什么输入值的变化没有反映在标记中被插入到文本区域。进一步检查后，更改输入字段的值，然后在 Firebug 中检查它们显示保留默认值。我是否需要以某种方式更新 DOM？

编辑 2： 正在设置 markup 变量，但我对输入字段所做的更改并未反映在插入到 textarea 中的标记中。

【问题讨论】：

查看此链接：stackoverflow.com/questions/7601851/…

标签： javascript jquery html

【解决方案1】：

试试，

$('#markup', '#work_form').val( markup );

同时添加一个 console.log(markup) 以确保标记变量设置正确。

【讨论】：

【解决方案2】：

对于文本区域，您需要更改它的 'value' 而不是它的 'innerhtml'，这就是 .html 的作用。

$('#markup').val(markup)

试试这个。

【讨论】：

【解决方案3】：

对输入字段的更改不会更改 DOM，这是我应该做的。为了更改 DOM，我将 .submit() 函数编辑为如下所示：

$('#work_form').submit(function(){
    // Update the DOM
    var block_1 = $('#block_1', '#work_form');
    block_1.find('input').each(function(i,e){
        el = $(e);
        el.attr('value', el.val());
    });
    // Snatch the markup
    var markup = block_1.html(); 
    // Place it into the textarea
    $('#markup', '#work_form').html( markup );
    // Move on
    return true;
});

感谢@PherricOxide 向我指出这个问题：

reading innerHTML of HTML form with VALUE attribute (& its value) of INPUT tags

【讨论】：