Question

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

<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;
});

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

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

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

Answer 1

尝试，

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

还要输入console.log（标记）以确保标记变量设置正确。

Answer 2

对于文字区域，您需要更改其'值'而不是'innerhtml'，这就是.html所做的。

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

试试这个。

Answer 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

在提交时将HTML复制到textarea

3 个答案: