如何使用 jQuery 防止双重表单提交？

使用 jQuery 防止双重表单提交

在某些情况下，当服务器仍在处理表单时，必须阻止用户重新提交表单。初次提交。本文使用 jQuery 提供了此问题的解决方案，承诺保留表单功能，同时有效抑制重复提交。

jQuery 代码导致问题

您最初的 jQuery 代码禁用了所有表单元素，包括提交按钮，这会导致表单未提交。仅禁用提交按钮至关重要，因为可能存在具有不同功能的多个按钮。

修订的解决方案

修订的解决方案利用 jQuery 中的数据属性来防止重复提交，而无需修改提交按钮。以下是改进后的代码：

jQuery.fn.preventDoubleSubmission = function() {
    $(this).on('submit',function(e){
        var $form = $(this);

        if ($form.data('submitted') === true) {
            // Previously submitted - don't submit again
            e.preventDefault();
        } else {
            // Mark it so that the next submit can be ignored
            $form.data('submitted', true);
        }
    });

    // Keep chainability
    return this;
};

用法

要实现此解决方案，只需在表单元素上调用 PreventDoubleSubmission 函数即可：

$('form').preventDoubleSubmission();

处理 AJAX表单

如果特定表单应允许在页面加载中多次提交，您可以使用类排除它们：

$('form:not(.js-allow-double-submission)').preventDoubleSubmission();

通过合并此改进的解决方案，您可以有效防止双重提交在您的 Web 应用程序中提交表单，确保无缝的用户体验并避免潜在的数据不一致。

以上是如何使用 jQuery 防止双重表单提交？的详细内容。更多信息请关注PHP中文网其他相关文章！