CODEWITHSUNDEEP
phpjavascriptjqueryformssubmit
durduvakis
durduvakis

Reputation: 189

Disable submit button after click and keep POST/REDIRECT/GET working

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

Upvotes: 0

Views: 5207

Answers (7)

epascarello
epascarello

Reputation: 207501

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.

Upvotes: 1

bipen
bipen

Reputation: 36531

try prop()

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

Upvotes: 0

Marc Uberstein
Marc Uberstein

Reputation: 12541

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

Upvotes: 1

user2235778
user2235778

Reputation: 19

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

Should work

Upvotes: 1

Ivan Yonkov
Ivan Yonkov

Reputation: 7034

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

Upvotes: 1

Orel Biton
Orel Biton

Reputation: 3508

You can just add this in the form:

onClick="this.disabled=true"

Upvotes: 0

sasi
sasi

Reputation: 4318

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

or use

.prop("disabled", true)

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

Upvotes: 0

Related Questions