使用按钮防止多次提交

Question

I am currently viewing all the possibilities for preventing multiple submission with button tag. The problem I am facing is that if users click submit button really fast it will enable them to submit multiple posts. I would like to restrict the submission to just one submission. I tried to use onclick="this.disabled = true , but it makes the button not working at all. The current button tag looks like this:

return "<button class='button btn btn-primary' id='gform_submit_button' onclick='this.disabled = true' type='submit'><span>Submit!/span></button>";

Can anyone guide me as to how to achieve this?

Answer 1

Ultimately, you cannot prevent multiple submissions on the client-side. You would have to implement these security measures on the server-side, in whatever server-side language you are using (eg, PHP).

Answer 2

On the client side , you could do something like this

var canSubmit = true;

$('.button').click(function(){

    if(canSubmit)
    {
        // fire missiles
        canSubmit = false;
    }
    else
    {
        // sorry missiles loading
    }

});

Now since after clicking once canSubmit has been set to false , a second click would not run the code. After validating or processing your submitted data you can set canSubmit back to true .

Answer 3

When the button is onClicked call this function:

function submitFunc(formId){.    document.getElementById(formId).submit();
}

Answer 4

Submitting a page is always going to be tricky. There are two challenges with submit

1. As you rightly mentioned that user can submit same page multiple times
2. After submitting page if user refresh the page then also page is going to be resubmitted

There is one trick to handle this challenge redirect the page with GET call. The GET call which you have used to load the data. Read more about it here .

So I would recommend to redirect page to GET once form is submitted.

In this process the new form will be loaded and if user try to submit the form validations will be fired that will handle 1st challenge.

And due to redirect as your last call is GET on refresh data will be loaded and there is no harm in it.