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

Disabling form submit prevents button attribute from being sent

本文关键字：按钮 属性 可防止 表单提交      更新时间：2023-09-26

我有一个带有两个提交按钮的表单。我使用'name'属性来查看哪个被点击以提交表单。我想在提交时禁用按钮使用jquery与以下功能:

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

问题是这样做后，我发现名称属性不再被发送。我已经检查了发送的请求(在网络选项卡- chrome)，它并没有被发送，即使在它以前被发送没有问题。

谁能告诉我为什么会这样，我该如何克服它?

谢谢

您应该通过捕获表单的状态来禁用表单提交。你可以通过在表单中添加一个类来实现这一点，如果它有这个类，那么就停止事件。

 $(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');
     }
 });

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

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

相关文章：