CODEWITHSUNDEEP
javajavascriptjqueryajaxforms
ke zhang
ke zhang

Reputation: 65

What is best practice to prevent double form submit

Recently I am working on a project which using ajax to call java servlet, and the request takes more than 10 sec to get the response, so I need to make sure during this time user won't be able to submit the form again, and my current approach is detect submit button click event and disable submit button, once success or error function is triggered in ajax, enable the button again, but this is not a good approach.

---- Edit ---- Sorry, I wasn't explain clearly, what I mean is this can stop non technical background user, but if any one intend to attack the site or whatever reason, they can simply modify html code to enable the button, and do another submit,

Before I tried another way which set a cookie interval after form submit, and check the cookie when request finish, but just wondering whether there is any other way to do this, this question is purely for learning purpose.

Sorry for my English:)

Upvotes: 2

Views: 2940

Answers (2)

Luis
Luis

Reputation: 6001

I dont see anything wrong with disabling the button, that is what I frequently use, because this not only provides an indication that the system acknowledged your click but also prevent the user from clicking again.

If for some reason you dont like that you can disable the underlying method call something like this:

var isSubmitting = false;

function handleClick(){
    if (!isSubmitting)
    {
        isSubmitting = true;
        $.ajax(
            "http://yourservice/submit" {
                data: {someData:123},
                contentType: 'application/json',
                type: 'POST',
                success: function(){
                    isSubmitting = false;
                },

            });

    }
}

About your edit, the cookie sounds like a good approach, basically you need something that the server is going to pass to the client, and then check on submit. once that has been authorized the server will prevent processing of further requests with the same parameter.

But bear in mind that a malicious user would spawn thousands of requests to get cookies and then perform all the submissions anyway, so it is not really a defence against attackers, for that you would have to implement some form of throttling.

So in the end if you just want to prevent accidental submissions the button hide will suffice.

Upvotes: 2

jarz
jarz

Reputation: 732

Something I have done and has been successful is a combination of what you described and preventing the function called by the button to execute twice. I do this by keeping a variable that gets set to true with the first request, then on subsequent request I check for it, if it's true, I don't do anything. Something like this:

var isRequestAlive = false;

var submit = function(){
    if(!isRequestAlive){
        isRequestAlive = true;
        doAjaxStuff("", function(){
            isRequestAlive = false;
        })
    }
}

Upvotes: 0

Related Questions