Enable href using JavaScript

Question

I have a JavaScript function using which I am disabling a hyperlink and it does the trick. Now after a few seconds lets say after 4 secs I want to enable the link. I am not sure how to do this. I've written a function to enable the link but it is not working.

Can someone please help using JavaScript.

JS functions

function disableDownloadReportLink(link) {
     link.onclick = function(event) {
        event.preventDefault();
     }
   }   

 function enableDownloadReportLink() {
     document.getElementById('downloadReportLink').href.disabled = false;
   }

it might be easier to hide/show the element that has the href attribute — Patrick
– Patrick, Commented Aug 30, 2016 at 21:21
Simply set a timer, see here for an example stackoverflow.com/questions/21721159/… — Guenther
– Guenther, Commented Aug 30, 2016 at 21:23
This is how I am calling it. <a href="#x" id="downloadReportLink" title="This function will provide you a 30 day download of all your eSign transactions." onclick="document.getElementById('viewIntegrationReport').submit(),disableDownloadReportLink(this),enableDownloadReportLink()"><span>Export E-Sign Information</span></a> — Jaykumar
– Jaykumar, Commented Aug 30, 2016 at 21:25
There's no such thing as element.href.disabled, that property doesn't exist ? — adeneo
– adeneo, Commented Aug 30, 2016 at 21:28

topheman · Accepted Answer · 2016-08-30 21:53:42Z

2

Basically, the same pattern as @Vicente Olivert Riera , just a different implementation, using add/remove EventListener ...

<a href="./foo" id="my-link">foo</a>

<script>
function disableLink(link) {
    var handler = function(e) {
        e.preventDefault();
        console.log('click disabled');
    }
    link.addEventListener('click', handler, false);
    link.dataset.disableHandler = handler;
}
function enableLink(link) {
    if (link.dataset.disableHandler) {
        link.removeEventListener('click', link.dataset.disableHandler);
        link.dataset.disableHandler = null;
    }
}

var link = document.getElementById('my-link');
disableLink(link);
link.style.color = 'grey';
console.log('link disabled');

setTimeout(function(){
    enableLink(link);
    link.style.color = 'blue';
    console.log('link enabled');
}, 4000);
</script>

answered Aug 30, 2016 at 21:53

topheman

7,9725 gold badges26 silver badges33 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 10:33:45Z

0

You need to set a a timer in the on load funktion. This has been asked before, see here for an example How to set timer on body onload?

edited May 23, 2017 at 10:33

CommunityBot

11 silver badge

answered Aug 30, 2016 at 21:25

Guenther

2,0452 gold badges17 silver badges21 bronze badges

Comments

Sylwit · Accepted Answer · 2016-08-30 21:28:14Z

0

Add a class .inactive on which you would bind a click event to e.preventDefault();

After 4 sec, remove the class.

answered Aug 30, 2016 at 21:28

Sylwit

1,6071 gold badge13 silver badges20 bronze badges

Comments

Vicente Olivert Riera · Accepted Answer · 2016-08-30 22:08:34Z

0

function disableDownloadReportLink(link) {
  link.onclick = function(event) {
    event.preventDefault();
  }
}

function enableDownloadReportLink(link) {
  link.onclick = undefined;
}

var el = document.getElementById("wop");

disableDownloadReportLink(el);

setTimeout(
  function() {
    enableDownloadReportLink(el); 
  },
  4000
);

<a id="wop" href="http://www.google.com">I will work after 4 seconds!</a>

Basically what you have done with disableDownloadReportLink is to disable what the onclick event does. What you can do if you want the link to work normally again is to set onclick to undefined:

function enableDownloadReportLink(link) {
    link.onclick = undefined;
}

You can put the call to enableDownloadReportLink into a setTimeout in order to do it after 4 seconds:

setTimeout(
  function() {
    enableDownloadReportLink(link);                                                                                                                              
  },
  4000
);

For your question about how to call those functions, this is what I would do, as I told you in my comment (don't expect this snippet to work, is only an example):

function doEverything(link) {
  // submit integration report
  document.getElementById('viewIntegrationReport').submit();

  // disable link
  disableDownloadReportLink(link);

  // enable link after 4 seconds
  setTimeout(
    function() {
      enableDownloadReportLink(link);
    },  
    4000
  );  
}

<a href="#x" id="downloadReportLink" title="This function will provide you a 30 day download of all your eSign transactions." onclick="doEverything(this);"><span>Export E-Sign Information</span></a>

edited Aug 30, 2016 at 22:08

answered Aug 30, 2016 at 21:35

Vicente Olivert Riera

1,27010 silver badges15 bronze badges

3 Comments

Jaykumar Over a year ago

How would you call these functions then?

Vicente Olivert Riera Over a year ago

I think you already have everything you need. How you call those functions is up to you. Why don't you call a function (when you click the link) which does everything, instead of in-lining the call to three functions in the link's onclick? That new function will do the submit(), then will call the function to disable the link, and then (after 4 seconds, using the setTimeout) will call the function to enable the link.

Vicente Olivert Riera Over a year ago

As I said in my answer, "don't expect this snippet to work, is only an example". You have to adapt it to your code.

Collectives™ on Stack Overflow

Enable href using JavaScript

4 Answers 4

Comments

Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related