无法提交克隆的表单

Posted 2023-02-22

【中文标题】无法提交克隆的表单

【英文标题】：Cloned form cannot be submitted

【发布时间】：2012-08-14 17:49:41

【问题描述】：

我有一个表格，其中每一行对应一个表格。虽然标记无效（<form> 标记紧跟在<tr> 之后），但提交按钮按预期工作（即它们提交包含的表单）。到目前为止，一切顺利。

现在我准备一个新行来附加到上面提到的表中。它隐藏在一个单独的表中。当按下“添加年份”按钮时，我使用表单克隆 tr 并将其附加到表中。但是惊喜来了：新创建的提交按钮没有提交。 （我没有克隆也试过了，没什么区别。）

这里是sn-ps的代码（包含在JSFiddle中）：

html

<div id="min" style="display:none">2010</div>

<div id="div_newyr" style="display:none">
<table>
    <tr>
<form action="" method="post" name="form1" id="form1">
        <td class="td_yr">
            <span></span>
            <input type="hidden" name="yr" value="" />
        </td>
        <td><input type="submit" name="sub_close" value="Close" /></td>
</form>
    </tr>
</table>
</div>

<table>
<tbody id="tb_yrs">
    <tr>
<form action="" method="post" name="form2" id="form2">
        <td class="td_yr last">
            <span>2010</span>
            <input type="hidden" name="yr" value="2010" />
        </td>
        <td><input type="submit" name="sub_close" value="Close" /></td>
</form>
    </tr>

</tbody>
<tbody>    
    <tr>
        <td><input type="button" id="but_newyr" value="Add a year" /></td>
    </tr>
</tbody>
</table>

JS

jQuery(document).ready(function() 
    $('#but_newyr').click(function() 
        var firstYear = parseInt($('div#min').html());
        firstYear--;
        newRow = $('#div_newyr').find('tr').clone(true);
        newRow.find('td.td_yr').children('span').html(firstYear).next('input').val(firstYear);

        $('#tb_yrs').append(newRow);
        $('div#min').html(firstYear);
    );
);

//added on a tip from a deleted answer
$(document).on('click', "input[type=submit]" ,function()
    $(this).closest('form').submit();
);

如果我让要克隆的表单可见，以便在克隆之前检查它是否有效，我可以提交该表单。所以，问题是：原始表单和附加/克隆表单或提交按钮有什么区别？

（只是一个旁注：附加的行开始于 Chrome 下的第二个单元格 - 但我认为它与提交无关。）

【问题讨论】：

您是否需要以编程方式为两个表单分配两个不同的名称或 ID？

我通常不会给我的表格命名。例外情况是当我的表单很多和/或非常长时。

好吧，如果这两个表单没有 id 或 name，那么 DOM 可能很难区分它们。我知道在某些情况下，当页面上有一个表单时，诸如 enter 键之类的东西用于提交，但如果有两个，这将被禁用，可能是类似的东西。我的第一个建议是尝试给他们不同的名称和 ID。

请查看最新版本：jsfiddle.net/9j4fx/3

【参考方案1】：

试试

$(this).closest('tr').find('form').submit();

而不是

$(this).closest('form').submit();

但最好是避免无效标记，或者：

不要使用表格进行布局 不要使用 form 元素 - 使用 jQuery 到 serialize 并按需提交行