CODEWITHSUNDEEP
javascripthtml
Jaykumar
Jaykumar

Reputation: 155

Enable href using JavaScript

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;
   }

Upvotes: 0

Views: 1353

Answers (4)

Vicente Olivert Riera
Vicente Olivert Riera

Reputation: 1220

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>

Upvotes: 0

topheman
topheman

Reputation: 7902

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>

Upvotes: 2

Sylwit
Sylwit

Reputation: 1577

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

After 4 sec, remove the class.

Upvotes: 0

Guenther
Guenther

Reputation: 2045

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?

Upvotes: 0

Related Questions