Issue disabling hyperlink in JavaScript

Question

I have a link that needs to be disabled once I click on it until the page reloads again. The main purpose is to limit the user from clicking on the link multiple times.

Below is my link:

<a href="/User/faces/profile.xhtml?id=20521&amp;itemNo=-1" onclick="this.disabled=true;document.body.style.cursor='wait';" style="padding: 10px 5px;">Profile</a>

This works fine on ie11, but not on chrome or iPad.

Is there anything that I am missing? Any help or hint is appreciated.

How do you know it is not disabled if it redirects you to other page — iLiA
– iLiA, Commented May 21, 2019 at 18:39
The JSF pre-render methods in the new page are getting executed multiple times based on the number of clicks until the page reloads. — Sirish V
– Sirish V, Commented May 21, 2019 at 18:42
You'll have to preventDefault() and, modify the element, and then redirect to the profile.xhml page programmatically. — Randy Casburn
– Randy Casburn, Commented May 21, 2019 at 18:51

malifa · Accepted Answer · 2019-05-21 19:38:14Z

2

You can't disable an anchor element by using disabled. There are some ways to achieve it of course. One of them would be to set pointer-events: none per css (but you would lose the wait-cursor style with it). There are others like removing the href attribute or changing it, but this could have sideeffects depending on your environment as well.

My suggestion would be to just keep a boolean state and prevent execution if the link was already clicked:

const link = document.querySelector('#myLink');
let redirected = false;
link.addEventListener('click', ev => {
    if (redirected) {
        ev.preventDefault();
    } else {
        console.log('click');
        redirected = true;
        link.style.cursor = 'wait';
    }
});

<a href="http://www.google.de" target="_blank" id="myLink">My Link</a>

edited May 21, 2019 at 19:38

answered May 21, 2019 at 19:31

malifa

8,1552 gold badges44 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sirish V Over a year ago

It worked on my local server, but had problems when deployed on Solaris. It was getting submitted multiple times. So, eventually I added a hidden button and click it using JavaScript onClick event. Now, disable the hidden button onClick of it. Not an elegant solution, but it resolved the issue.

Bekim Bacaj · Accepted Answer · 2019-05-21 20:27:13Z

1

The disabled property of an element //- they are now calling attribute - in other plain browsers related to Netscape Navigator doesn't have support the property disabled on other than a narrow group of page controls they also mistake for elements...

The most recent table of support are the following tags:

<button> <fieldset> <input> <optgroup> <option> <select> <textarea>

Meaning : There is no support for Link \ Anchor elements, except in versions of IE 1997 and up.

For a wider support I suggest you try using a button tag for your code.

edited May 21, 2019 at 20:27

answered May 21, 2019 at 19:41

Bekim Bacaj

6,0152 gold badges27 silver badges26 bronze badges

1 Comment

Sirish V Over a year ago

Added a hidden button that is clicked onClick of the link. Once the button is clicked I am disabling it from further clicks. It solved the issue.

Collectives™ on Stack Overflow

Issue disabling hyperlink in JavaScript

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related