表单嵌套在表格中时的jQuery表单提交答案

【问题标题】：jQuery form submission when form nested in table表单嵌套在表格中时的jQuery表单提交
【发布时间】：2013-07-29 10:27:20
【问题描述】：

表单不能在表格中使用 jQuery 提交是有原因的，还是我做错了什么？我已经在表格外测试了表单提交，然后我将它包装在表格中它就停止工作，即使我添加了一个额外的parent() 来弥补在代码中<td> 元素上方移动的表单。有人可以帮我解决这个问题吗？

HTML

WITHOUT TABLE
<form action="page.cfm" method="post">
    <select class="select">
        <option>Test</option>
    </select>
</form>

WITH TABLE
<table>
    <tr>
        <form action="page.cfm" method="post">
            <td>
                <select class="select">
                    <option>Test</option>
                </select>
            </td>
        </form>
    </tr>
</table>

jQuery

WITHOUT TABLE
$(".select").on("change", function() {
    $(this).parent("form").submit();
});

WITH TABLE
$(".select").on("change", function() {
    $(this).parent().parent("form").submit();
});

【问题讨论】：

大胆猜测，TD 不是表单的有效子代，而表单也不是 TR 的有效子代。
将form 作为tr 的子元素不是有效的HTML。
如下所述，无效的 HTML 并不是不正确的 HTML。大多数网站不坚持使用有效的 HTML，但我明白最好尽量坚持使用有效的 HTML，因此我感谢您的反馈。
知道这是一篇较旧的帖子——来自仍然相信元素在网站设计中占有一席之地的人——遇到了同样的问题，没有更优雅的选择，替换为元素与
元素（使用 Bootstrap 布局）并能够通过该方法获得类似的布局。

标签： jquery html forms

【解决方案1】：

是否有原因导致表单无法在表格中使用 jQuery 提交，或者我只是做错了什么？

您的 HTML 无效。使用a validator。一个表单可以包含整个表格。表格可以完全包含在表格单元格中。表单不能只包含构成表格的一些单元格。

浏览器中的错误更正是将表单放在表格之外，因此尝试提交它会产生意想不到的结果。

【讨论】：

无效的 HTML 并不意味着不正确的 HTML。不过，我明白你的意思。我的问题是表格将包含一个更新和删除按钮，需要两种不同的表单，这是否意味着我需要为每个操作的每个单元格提供一个表单？
“无效的 HTML 并不意味着不正确的 HTML”——是的，确实如此（尽管反过来不一定正确）。
是的，每个单元格都需要一个表单。
混蛋，为我加油干杯。而且我很确定它不会，或者如果所有的 HTML 都不正确，很多网站都将无法运行。
“不正确”并不意味着“糟糕到网络浏览器无法恢复”（但正确可以节省大量时间试图找出为什么在一个或多个浏览器中看起来有问题）跨度>

【解决方案2】：

HTML

<form action="page.cfm" method="post">
    <table>
        <tr>
            <td>
                <select class="select">
                    <option>Test</option>
                </select>
            </td>
        </tr>
    </table>
</form>

$(".select").on("change", function() {
    this.form.submit();
});

请注意，对于表单元素 this.form 引用包含表单。

【讨论】：

我的问题是我可以更新多个单元格，但是在同一个表格中，我需要使用不同的表格才能从表格中删除该项目。这就是我在表单元素中嵌套<td>'s 的原因。
@LeeB - 您可以将整个表格嵌套在表单中吗？
正如我所说的，但从表中删除产品需要一个单独的表单，因为其中一个值与更新值不同。既然我明白了原因，我无论如何都会找到解决方案。

【解决方案3】：

尝试使用`$.closest()`

没有/有桌子

$(".select").on("change", function() {
    $(this).closest("form").submit();
});

【讨论】：

尝试使用$.closest()

尝试使用`$.closest()`