jquery - 表单嵌套在表格中时的jQuery表单提交

Question

表单不会在表格中使用 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();
});

Answer 1

表单不会在表格中使用 jQuery 提交是有原因的，还是我只是做错了什么？

您的 HTML 无效。使用验证器。一个表单可以包含整个表格。表格可以完全包含在表格单元格中。表单不能只包含组成表格的某些单元格。

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

Answer 2

HTML

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

JS

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

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

Answer 3

尝试使用$.closest()

没有/有桌子

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