CODEWITHSUNDEEP
javascriptjqueryhtmlbutton
wordwannabe
wordwannabe

Reputation: 101

prevent multiple submission with button

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?

Upvotes: 0

Views: 66

Answers (4)

Dnyanesh
Dnyanesh

Reputation: 2343

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.

Upvotes: 0

Ian Hazzard
Ian Hazzard

Reputation: 7771

When the button is onClicked call this function:

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

Upvotes: 0

Anubhav
Anubhav

Reputation: 7208

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.

Upvotes: 0

Greg
Greg

Reputation: 1243

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 (e.g., PHP).

Upvotes: 2

Related Questions