Prevent anchor click after one click

Question

I am facing one issue, I want to disable anchor click after one click. I have on-click attribute set in my anchor tag. Below is my HTML

<a style="cursor:pointer;" id="someId" onclick="Myfuntion()">Verify</a>

After I click "Verify" I am changing anchors text to "Verifying..." and one more thing I am trying to disable this anchor to avoid click in between the verification logic going on.

I have tried event.preventdefault() and also added disabled attribute to anchor. But nothing works.

Please help!

"Below is my html" - I don't see your html. Could you add it!? — Cleb, Jul 27 '15 at 11:41
possible duplicate of [Disabling links to stop double-clicks in JQuery](http://stackoverflow.com/questions/1681679/disabling-links-to-stop-double-clicks-in-jquery) — Nanhydrin, Jul 27 '15 at 11:43
Where is the Myfunction() to go with this? It would be a good idea to display the javascript to go with this so we can see why this isn't working as intended and give you any solution(s)/example(s) if any available to fix your issue. *Why not just remove the ahref and onclick attribute once Myfunction is called? Or replace the href to href="#"* — NewToJS, Jul 27 '15 at 11:47
Cleb I hv already added it in my solution but due to formatting it is not getting reflected. Nanhydrin thanks for the solution but it is not working for me :( — Deepika Thakur, Jul 27 '15 at 11:51
@DeepikaThakur Please read this to learn how to format your stackoverflow question. http://stackoverflow.com/help/formatting — NewToJS, Jul 27 '15 at 11:54
@DeepikaThakur you can unbind bind the **'click'** event the current element at the end of the Myfunction()'s code so the after executing all code click event will b unbinded ( target element you can change as per need ) — Himesh Aadeshara, Jul 27 '15 at 12:05

score 0 · Answer 1 · answered Jul 27 '15 at 11:48

If you were using jQuery for this you could have done this more easly.

Here we add a new class to a link to show that it has been clicked already. We check this when a click is made.

<a style="cursor:pointer;" id="someId">Verify</a>

$('#someId').on('click',function(){
    //Check if button has class 'disabled' and then do your function. 
    if(! $(this).hasClass('disabled')){
        $(this).addClass('disabled');
        Myfuntion();
        $(this).removeClass('disabled');
    }
});

score 0 · Answer 2 · answered Jul 27 '15 at 13:02

Here is a demo as to how it could be done using Javascript.

//Pass the event target to the function
function Myfuntion(elem) {

    //If the element has no "data-status" attribute
    if (!elem.getAttribute("data-status")) {

        //Set attribute "data-status=progress"
        elem.setAttribute("data-status", "progress");
        //Change the text of the element
        elem.textContent = "Verifying...";

        //The setTimeout(s) below is only for the demp purpose
        //Lets say, your verification process takes 4 seconds
        //When complte
        setTimeout(function() {
            //Remove the attribute "data-status"
            elem.removeAttribute("data-status");
            //Notify the use that verification is done
            elem.textContent = "Verified";

            //Again, this is only for demo purpose
            setTimeout(function() {
                //User may verify again
                elem.textContent = "Verify";
            }, 1000);

        }, 4000);
    }
    return false;
}

Link to the demo

score 0 · Answer 3 · answered Jul 27 '15 at 14:33

0

There are plenty of ways to do this; one simple approach is to just redefine the function itself:

    var myFunction = function() {
        alert('clicked');
        // do whatever your function needs to do on first click, then:
        myFunction = function() { // redefine it 
            // to no-op, or to another action
            alert('second click');
        }
    }

<a onclick="myFunction()">click me</a>

answered Jul 27 '15 at 14:33

Daniel Beck

20,653
5
38
53

Thank you everyone for awesome solutions.. I figured it out it in some other way... your help is highly appreciated – Deepika Thakur Jul 28 '15 at 12:17

Prevent anchor click after one click

3 Answers3