HTML5: How to prevent double form submit without losing any data?

问题

I have a HTML form with two buttons

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

and following JavaScript code

// 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)
    });
});

(plus some CSS transitions and animations to make .submitting look nice)

The above code tries to prevent double form submission because some people seem to misunderstand the web and keep double clicking normal form submit buttons. Some other people have problems with touchscreens due shaking hands or poorly working broken mouse buttons so this about usability, too.

The problem is that Google Chrome runs the event handler on("submit") before collecting the data to be sent with the form submission. As a result, the HTML5 rule of not sending the input value if its control is disabled gets in the way and prevents any submit buttons from being included in the request that the server can see. (The server is looking for parameter button1 or button2 but ignores actual value because it's a localized string due historical HTML form rules.)

How to disable submit buttons on browsers that honor HTML5 rules and still get info about the actual button that was pressed? I very much want to have a solution that has semantically correct HTML5 source. Is there a way to run code after the form data has been collected and about to be transferred to the server?

Somewhat related non-duplicates (please, do not flag this as duplicate of any of these):

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

Additional requirements:

Allow re-submitting the form after a delay (10 sec in the example above) to allow user to workaround e.g. interrupted network connection or to do intentional double submission.
No racy solutions (e.g. running the above code with a short timeout after the actual on("submit") event hoping that the browser has collected the data but the user isn't fast enough to double click the button.
The form should still work with JavaScript disabled - not having double form submit prevention in this case is okay.
No hacks such as adding a hidden form input containing the missing parameter into the DOM.

回答1:

How about hijacking the click using onClick() and submitting the form before disabling the buttons?

[untested]

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

来源：https://stackoverflow.com/questions/60171869/html5-how-to-prevent-double-form-submit-without-losing-any-data

标签

javascript

jquery

html

forms

usability