How to disable href after one click - html

Question

I wish to disable a href after clicking it once.
I have the following href:
<a href="BeginPayment.aspx?PayPal=true" id ="link" onclick="javascript:clickAndDisable();">
I have added the onclick event that gets called on click.
I have attempted to change the href to be a blank path so that it cannot be clicked a second time: This is via a Javascript function.
function clickAndDisable(link)
{
alert("Entered clickAndDisable function");
this.href="''";
}
My code is all within an xslt file.
Where am i going wrong with this?
Here is my updated code following peoples suggestions:
<a href="BeginPayment.aspx?PayPal=true" id ="link" onclick="javascript:clickAndDisable(this);">
<script type="text/javascript">
function clickAndDisable(link)
{
alert("Entered clickAndDisable function");
link.href="";
}
This disables the link from working at all, I wish for the link to work the first time it is clicked, but not work any other time it is clicked.....

Answer 1

You can use the Javascript like
function clickAndDisable(link) {
link.onclick = function(event) {
event.preventDefault();
}
}
<a href="BeginPayment.aspx?PayPal=true" id ="link" onclick="javascript:clickAndDisable(this);">

Answer 2

If you can use jQuery then you can append a class on the first click and then preventDefault after that.
$('a').on("click", function (e) {
if($('a').hasClass('clicked'){
e.preventDefault();
} else {
$('a').addClass('clicked');
}
});
This Fiddle shows an example
EDIT: As pointed out by Johannes H. jQuery is not required, this can be done in pure JS as seen here

Answer 3

First of all: .href="''" will not set the href attribute to an empty value, but to the string ''. Instead, .href="" does what you tried.
Second: this refers to the source element of the event within the inline onclick handler. However, when a function is called in the event handler, there is no special treatment for this, so any reference to this inside the function will point to the window object.
To solve this you can either:
1) pass the element to your function:
<a href="BeginPayment.aspx?PayPal=true" id ="link" onclick="javascript:clickAndDisable(this);">
function clickAndDisable(link)
{
alert("Entered clickAndDisable function");
link.href="";
}
2) use Function.prototype.call()
<a href="BeginPayment.aspx?PayPal=true" id ="link" onclick="javascript:clickAndDisable.call(this);">
function clickAndDisable()
{
alert("Entered clickAndDisable function");
this.href="";
}
3) Use Javascript to attach the event handler and dump the inline handler (in this case, this will be set to the EventTarget that triggered the handler when calling handler function):
<a href="BeginPayment.aspx?PayPal=true" id ="link">
function clickAndDisable()
{
alert("Entered clickAndDisable function");
this.href="";
}
document.getElementById('link').attachEventListener('click', clickAndDisable);
Third: encorporating #SamAnderson's answer, instead of setting an empty value for href, you can also set a flag on first call and evaluate if it has been set on later calls, and if so, use Event.preventDefault() to prevent the normal action of the hyperlink form happening:
<a href="BeginPayment.aspx?PayPal=true" id ="link">
var clicked = false;
function clickAndDisable(e)
{
alert("Entered clickAndDisable function");
if (clicked)
{
e.preventDefault();
}
else
{
clicked = true;
}
}
document.getElementById('link').attachEventListener('click', clickAndDisable);

Answer 4

I ended up disabling the href after one click using the following javascript function:
function check(link) {
if (link.className != "visited") {
//alert("new");
link.className = "visited";
return true;
}
//alert("old");
return false;
}​​