PHP/JS : Preventing doubleinserting with function

Question

Yes im having a issue i thought i didn't have.

When you submit it runs a javascript function, that runs an ajax call. This function have this right under it´s name(first line in the function):

 $('#submitWall').attr('disabled', true);

This works very well, but not so well for the faster humans...I tried to click/pressing enter really fast, and it inserted to the database 2-3 times.

And I want to prevent this. As i said i have the above, which didn't solve it 100%.

Is there a solution for this in JS/jquery or maybe in PHP, so there's like a 1 second timelimit somehow..?

Here's my function:

    function DoWallInsert(BuID, uID){
     $('#submitWall').attr('disabled', true);
  var wrapperId = '#wall_insert';
    $.ajax({ 
       type: "POST",
       url: "misc/insertWall.php",
    data: {
    value: 'y',
    BuID : BuID,
    uID : uID,
    message : $('#message').val() 
    },
       success: function(msg){
$('#submitWall').attr('disabled', false);
     $(wrapperId).prepend(msg);
     $(wrapperId).children().first().slideDown('slow');
     $('#message').val("");
        }
     });
}

Answer 1

Don't just set the attribute to disabled, also remove the onclick value. Then, use setTimeout() to replace it after X time.

document.getElementById('submitWall').onclick='';
setTimeout("document.getElementById('submitWall').onclick='DoWallInsert';", 1000);

That code may need tweaking, I'm not on my web development machine and can't test it.

Answer 2

I think the problem here is that the attribute change does not come into effect until the function ends due to the fact that javascript runs single thread.

If you setTimeout to another function with minimum delay and have that function do all the rest of the processing, and maybe also have the first function test the attribute first and bailout if it is already disabled it might prevent this.

Since Javascript is single thread, even if the first function is run twice in a row before gui is updated the second call should still see it as disabled and ignore your click.

It might even be enough to check the attribute first, and if it is disabled, exit function.

 if($('#submitWall').attr('disabled'))
      return ;

Answer 3

Javascript is not a real-time language so there are no 100% guarantees on execution order, it's only best effort.

However, you can bypass the problem entirely by issuing unique server-side submission IDs for each request.

Each request should then include a unique ID that the server validates against it's own internal list. If the ID has already been submitted or is not on the list, then PHP should simply stop any further action. You can return and set a new submission ID with the callback function after the initial request has been completed successfully.