由于双击文本链接而重复数据库条目

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

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')

  1. 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.)

  2. You could simply add an onclick handler to the link that prevents it from being followed again (return false resp. even.preventDefault()), but

  3. 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.)

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.