禁用表单提交可防止发送按钮属性答案

【问题标题】：Disabling form submit prevents button attribute from being sent禁用表单提交可防止发送按钮属性
【发布时间】：2017-02-14 01:10:09
【问题描述】：

我有一个带有两个提交按钮的表单。我正在使用“名称”属性来查看点击了哪一个来提交表单。我想在使用带有以下功能的 jquery 提交时禁用按钮：

$(document).on('submit', '.js-form', function(e) {
   $(this).find('input[type=submit]').prop('disabled', true);
});

问题是这样做之后，我发现不再发送 name 属性。我已经检查了发送的请求（在网络选项卡 - chrome 中）并且它没有被发送，即使在它曾经没有问题地发送之前也是如此。

谁能告诉我这是为什么以及如何克服它？

谢谢

【问题讨论】：

禁用元素不提交，获取表单数据后可以禁用按钮，但问题中缺少提交表单的代码。
为什么不对choice 使用两个无线电输入和一个提交按钮？

标签： javascript php jquery forms laravel

【解决方案1】：

您应该通过捕获其状态来禁止提交表单。您可以通过向表单添加一个类来完成此操作，如果它具有该类，则停止该事件。

 $(document).on('submit', '.js-form', function(e) {
     if ($(this).hasClass('disabled')) {
         // Form is disabled, stop the event
         e.preventDefault();
         e.stopPropagation();
         return false;
     } else {
         // Allow first submit and add class to stop subsequent
         $(this).addClass('disabled');
     }
 });

这不会清除或禁用任何按钮，而是允许所有数据通过。

【讨论】：

【解决方案2】：

提交表单后不要禁用提交按钮。浏览器已经在技术上为您处理了这个问题。提交表单后，浏览器将不接受任何其他成功的表单提交。当然，用户可以在页面加载之前点击不同的按钮，但不会多次提交表单（除非您使用 ajax 或其他解决方案）。

【讨论】：