javascript - 如何防止重复表单提交而不丢失任何数据？

Question

我有一个带有两个按钮的 HTML 表单

<form action="...">
    ...
    <input type="submit" name="button1" value="Localized button 1">
    <input type="submit" name="button2" value="Otro botón">
<form>

和以下 JavaScript 代码

// prevent double submit and display a nice animation while submitting
$(document).on("submit", "form", function(event)
{
    $(this).find("input[type=submit], button").each(function()
    {
        var $button = $(this);
        $button.attr("disabled", "disabled");
        $button.addClass("submitting");
        setTimeout(function()
        {
            $button.removeAttr("disabled");
            $button.removeClass("submitting");
        }, 10000); // remove disabled status after timeout (ms)
    });
});

(加上一些 CSS 过渡和动画，使 .submitting 看起来不错)

上面的代码试图阻止双重表单提交，因为有些人似乎误解了网络并不断双击普通表单提交按钮。其他一些人由于握手或鼠标按钮工作不良而出现触摸屏问题，因此这也与可用性有关。

问题在于，Google Chrome 在收集要随表单提交一起发送的数据之前，on("submit") 会运行事件处理程序。因此，如果控件被禁用，则不发送输入值的 HTML5 规则会妨碍并阻止任何提交按钮包含在服务器可以看到的请求中。 (服务器正在查找参数 button1 或 button2 但忽略实际值，因为它是由于历史 HTML 表单规则而导致的本地化字符串。)

如何在遵守 HTML5 规则的浏览器上禁用提交按钮，同时仍获取有关按下的实际按钮的信息？ 我非常希望有一个具有语义正确的 HTML5 源代码的解决方案。有没有办法在收集表单数据并将其传输到服务器后运行代码？

有些相关的非重复项(请不要将其标记为其中任何一个的重复项):

• Disabling double submit prevent sending submit name
• Prevent double submits
• Prevent double submit

其他要求:

• 允许在延迟(上例中为 10 秒)后重新提交表单，以允许用户解决问题，例如网络连接中断或故意重复提交。
• 没有活泼的解决方案(例如，在实际的 on("submit") 事件之后运行上述代码并设置短暂的超时，希望浏览器已收集数据，但用户的速度不够快双击按钮。
• 在禁用 JavaScript 的情况下，表单仍应正常工作 - 在这种情况下，不进行双重表单提交预防是可以的。
• 没有黑客行为，例如将包含缺少参数的隐藏表单输入添加到 DOM 中。

Answer 1

如何使用 onClick() 劫持点击并在禁用按钮之前提交表单？

[未经测试]

$('input[type=submit]').click(function(e) {
    var $submitButton = $(e.target);

    // prevent automatic form submission
    e.preventDefault();

    // prevent double click without disabling
    if (! $submitButton.hasClass('submitting')) {
        $submitButton.addClass('submitting');

        // submit your form contents
        $('#your-form-id').submit();

        // disable all submit buttons
        $(this).find("input[type=submit], button").each(function()
        {
            var $button = $(this);
            $button.attr("disabled", "disabled");
            $button.addClass("submitting");
            setTimeout(function()
            {
                $button.removeAttr("disabled");
                $button.removeClass("submitting");
            }, 10000); // remove disabled status after timeout (ms)
        });
    }
});