单击后禁用提交按钮，并保持POST / REDIRECT / GET工作

Question

I use the POST/REDIRECT/GET trick to prevent refresh-resend of forms. Now I would like to disable a form submit button (after click) that should not be clicked twice. Although I tried all javascript examples I found, they all conflict with POST/REDIRECT/GET. In most cases it doesn't even submit but just redirects to itself. Any solution ? Thanks for your help.

Something I've tried and conflicts is this example:

the script first runs headers.php with this in:

if (isset($_POST['start-diff-scan']))
{
    $_SESSION['SCAN_START'] = true;

    header('HTTP/1.1 303 See Other');
    header('Location: '.APP_URL.'scan.php');
    exit;
}

and then scan.php with this form:

<form name="start-diff-scan" id="start-diff-scan" method="post">
    <button
        name="start-scan"
        id="start-scan"
        value=""
        class="start-scan btn btn-primary"
        type="submit"
        method="post">
        Start New Scan
    </button>
</form>

and works fine. but the js trick conflicts this. I added the js code at the very end of scan.php

<script>
$('#start-diff-scan').submit(function()
{
    $('#start-scan').prop('disabled', true);
});
</script>

What happens is it only redirects to the same page (scan.php) without executing anything. Thanks for all yoru answers and help so far this is great. Any ideas appreciated thanks very much

Answer 1

You cannot prevent it this way, since it's user-side scripting, and people can easily delete this code, before sending the form. Even you disable the button. Make checks in your server-side script, whether the request is already inserted, so you will display them either an error, or get them back to the page

Answer 2

$('#start-scan').attr("disabled", true);

应该管用

Answer 3

If the "disable" method is messing up your code and all else fails :

You can try to overlay the button with a "loader gif" making it not clickable.

$('#start-scan').click(function()
{
    $('#start-scan').before('<div>LOADING</div>'); //Set the loading overlay width, height and background-color
});

Answer 4

The problem you have is setting the disabled when the person clicks causes the button to be disabled and the click action does not fire off.

Add a setTimeout to delay setting the disabled property.

Other option is to hide the button and replace it with text that says submitting.

Answer 5

$('#start-scan').attr('disabled', true);

or use

.prop("disabled", true)

$('#start-scan').prop("disabled", true)

Answer 6

您可以将其添加为以下形式：

onClick="this.disabled=true"

Answer 7

尝试prop()

$('#start-scan').prop('disabled', true);