为啥 jQuery 不提交这个表单？

Posted 2023-02-24

【中文标题】为啥 jQuery 不提交这个表单？

【英文标题】：Why won't jQuery submit this form?为什么 jQuery 不提交这个表单？

【发布时间】：2012-05-26 11:06:38

【问题描述】：

我正在尝试使用 jQuery 提交一个表单，但我必须遗漏一些小东西，因为我无法让它工作，而且从我看到的一切来看它应该可以正常工作。

这是怎么回事？

<table class="newrecord"><form id="editthis" action="page.php" method="post">       

    <tr><td class="left">Name:</td><td><input type="text" name="name" id="name" /></td></tr>
    <tr><td class="left">Company:</td><td><input type="text" name="company" /></td></tr>
    <tr><td class="left"><a href="?action=browse">Cancel</a></td><td><input type="button" name="submit" class="subbut" id="subthis" value="Update" /></td></tr>

</form></table>

还有 javascript：

    $("#subthis").click(function() 
        $('#editthis').submit(); // An alert box works, so I know this is triggering
    );

正如代码中提到的，如果我单击提交按钮，则会出现一个警告框，但是当我使用 jQuery 提交功能时，什么也没有发生。我错过了什么？？？

【问题讨论】：

为什么需要在 document.ready 上提交自己的表单？编辑：我没有注意到事件绑定。精疲力尽时不得阅读SO。经验教训

您是否尝试过将form 标签放在 table 标签之外，以便获得有效的html？ This SO article might be related

@CengizCan - 表单未自行提交。当文档准备好时，代码会附加click 事件。

【参考方案1】：

您不需要使用 jQuery 来提交表单。提交按钮提交其所属的表单是默认行为。

另外，不要使用表格进行布局。表单元素本身可以很好地布局。

<form id="edit_this" action="page.php" method="POST">
    <label>Name <input type="text" name="name"></label>
    <label>Company <input type="text" name="company"></label>
    <a href="?action=browse">Cancel</a>
    <button type="submit">Update</button>
</form>

可以轻松布局并自行提交。

如果您需要在使用 jQuery 提交之前发生某些事情，请将其绑定到表单的 onsubmit 处理程序，而不是实际单击按钮。

---

实际的问题是您为按钮指定的名称与 JavaScript 中的保留字之间的冲突。不要使用submit 作为名称。

【讨论】：

我知道我不需要，但是我还有一些其他的事情我想用 jquery 处理这个表单，我只是把它归结为准系统，直到我能解决这个问题。

【参考方案2】：

我看到两个可能的问题。

1) 您在table 标签内有form 标签。虽然这可能不是问题的根本原因，但它不是有效的 HTML。

2) 您使用“提交”作为提交按钮的name。应该避免这种情况，因为您的对象会与 JavaScript 保留字发生冲突。像使用 id 属性一样使用“提交”以外的其他内容。

【讨论】：

在进行故障排除时，我已将表格移至表格内。 #2 是它！我重命名了按钮，它可以工作。谢谢！！！

太棒了！请务必接受最适合您的解决方案的答案。

谢谢。没想到上面有计时器。