duplicate database entries due to double clicks on text links

Question

I found a tutorial recently on how to disable the potential for multiple html form submissions due to impatient folk clicking the submit button a few times, and it reads thus:

Give your button an id such as:

<input type="submit" value="Submit" id="myButton" />

then add a few lines to the form tag:

onsubmit="document.getElementById('myButton').disabled=true;
document.getElementById('myButton').value='Submitting, please wait...';"

Looks great (haven't tried it on my forms yet) but I'm wondering how to translate this to a text link that links to a 'handler script' that enters stuff into my database?

Edit: I think I need to be more specific! I have a form which the (logged in) user submits, they are then taken to a 'preview' page where they preview and can edit or publish their text, hence the text links to the handler script(s).

I'm working in php and sql.

Thanks

yes, I have jquery there but I wouldn't say I was using it extencively yet, it's kinda new to me :) — Mr C, May 07 '14 at 18:49
You will want to validate this on the php side also, if it's important that duplicate entries are not made. But you can do the same sort of thing using the link's onclick event. — random_user_name, May 07 '14 at 18:50

score 2 · Answer 1 · answered May 07 '14 at 18:51

You should not rely on that alone, but prevent duplicate entries server-side as well. (F.e. using a UNIQUE index on database columns, having a token with a form that allows it to only be processed once, etc.)
You could simply add an onclick handler to the link that prevents it from being followed again (return false resp. even.preventDefault()), but
requests that change/create data server-side should not be made using GET, but only POST – and therefor a link would be wrong for this top begin with. (Reason for this rule-of-thumb: Other mechanism might trigger following that link, not only the user clicking it – f.e. a browser (-extension) prefetching resources, or a search engine following links [if the whole thing is publicly accessible and doesn’t require a logged-in user, etc.)

All the links that do this sort of thing require you to be logged in to the site, so I guess that's ok, but I'm not familiar with what folks mean by 'token' or how to impliment one, I'll go google it unless someone can step in :) — Mr C, May 07 '14 at 19:00

score 0 · Answer 2 · edited May 23 '17 at 10:26

I'll borrow a solution I saw from some other guy in here...

Here's the link to that question jQuery disable a link

And a shortcut to Peter DeWeese's answer:

Add this to your CSS

a.disabled {
  opacity: 0.5
  pointer-events: none
  cursor: default
}

And add this to your JS

$('#yourlinksid').click(function (e) {
   $(this).addClass('disabled'))
});

You can then remove the disabled class when you need to with removeClass('disabled')

score 0 · Answer 3 · answered May 07 '14 at 18:54

That will not work if the user has javascript disabled. A better approach it to use a CSRF token. Create a unique token when you render the form and then when you process it, check if the token is correct and discard it. If the user clicks the form twice, the token will not be found the second time and you can safely discard the request.

duplicate database entries due to double clicks on text links

3 Answers3