单击后禁用提交按钮会阻止表单正确提交答案

【问题标题】：Disabling submit button after click stops form from submitting properly单击后禁用提交按钮会阻止表单正确提交
【发布时间】：2015-01-07 20:25:39
【问题描述】：

为解谜者准备的。

我想禁用提交按钮以防止重复提交。

为此，我使用 jQuery：

jQuery('#subnewtopicform').on('submit', function () {
    jQuery('#subnewtopic').prop('disabled', true);
});

并剥离 HTML：

<form action="file.php" method="post" id="subnewtopicform">
    <input type="text" name="title" />
    <input type="submit" value="Submit" name="subnewtopic" id="subnewtopic" /> 
</form>

当点击提交按钮时，它被禁用并且页面重新加载但表单没有正确提交，为什么？！删除 jQuery 代码将使其正确提交。

在我 10 年的编码中，我还没有遇到过这么奇怪的事情。

【问题讨论】：

是否曾经向服务器执行过包含表单内容的请求？
@NathanTaylor 我怀疑内容从未发送过，这没有任何意义。
@HenrikPetterson 你怀疑还是你确定？这是关键。
@FastTrack 据我所知，没有发送实际数据。有什么好的检查方法吗？
“未正确提交”是什么意思？

标签： jquery html forms

【解决方案1】：

试试这个代码。我没有收到错误。

<form action="file.php" method="post" id="subnewtopicform">
    <input type="text" name="title" />
    <input type="submit" value="Submit" name="subnewtopic" id="subnewtopic" /> 
</form>

<script src="assets/js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $('#subnewtopicform').on('submit', function(e) {
        $('#subnewtopic').prop('disabled', true);
        // e.preventDefault();
    });
</script>

注意事项：

POST 操作太快，您无法看到禁用的按钮。在$("#subnewtopic.prop('disabled', true); 下方取消注释e.preventDefault() 以测试它是否有效。
在尝试使用此功能之前必须启用 jQuery。
使用 Firefox 或 Chrome 的开发者工具检查 Javascript 控制台是否有任何错误，并使用“网络”选项卡查看是否发布了任何请求。

除此之外，这应该非常简单。就像我说的，我没有错误，你很奇怪，而且可能非常简单。让我知道这是否有帮助！

【讨论】：

您能否确认一下，您是否对我的初始代码进行了任何更改？我检查了网络选项卡并发布了请求。
非常轻微，将(e) 添加到函数并确保附加了jQuery，并将jquery 的所有实例更改为$ 按照惯例。如果您取消注释 e.preventDefault(); 会发生什么，该帖子仍然会发生吗？按钮会发生什么？此外，进行如此少的更改的原因是我无法使用您的初始代码复制错误。它对我来说很好。
@tim lewis jQuery 是对 $ 的约定，因为 $ 被许多技术保留。 $ 是 jQuery 的简写版本。
@Buck3y3 也许吧，但是 99% 的 jQuery 问题是 $("#something") 而不是 jquery("#something")，这就是我的意思。
@tim lewis 是的，但他的方式比你改变的方式更好。然后你试图告诉他你的方式是惯例，而他们都是惯例。让我们试着发布正确的信息。

【解决方案2】：

确保在jquery函数中返回true，否则服务器提交将不会发生（这是错误检查的情况）

更新：

jQuery('#subnewtopicform').on('submit', function () {
    jQuery('#subnewtopic').prop('disabled', true);
    return true; 
});

见：
Form Submit Execute Javascript Best Practice?

不知道他为什么在那个答案中返回错误，我认为这是真的。尝试两者。

【讨论】：

作为评论比较好，不能完全回答问题。
认为答案不够复杂，需要写出代码。这也是很多地方一直在问和回答的问题。
PPS。如果这不是原因，那么原因肯定在您的后端，我们需要更多信息。
我很想知道为什么投反对票？我的代码没有回答没有任何“错误”。这可能不是绝对的原因，但绝不是错误的。我实际上在一个小型 Web 表单应用程序中对此进行了测试，它运行良好。
这个答案是完全错误的。默认情况下，onsubmit 事件不阻止表单提交。 return true 最后什么都不做。