Jaykumar Jaykumar - 3 months ago 12
HTML Question

Disable/enable anchor tag using JavaScript

I am trying to enable an anchor element using JavaScript but it looks like I am having some syntax issues. The disable part works fine but the anchor is not getting enabled after a time interval.

Form:

<a id="downloadReportLink"
href="#x"
title="This function will provide you a 30 day download of all your eSign transactions."
onclick="document.getElementById('viewIntegrationReport').submit(), doEverything(this)">

<span>Export E-Sign Information</span>
</a>


JS functions:

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

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

function doEverything(link) {
disableLink(link);
setTimeout(function() {
enableLink(link);
},
4000
);
}


I assumed
link.onclick = undefined
would enable the anchor but it does not.

Am I doing anything wrong here?

Answer

It's a little unclear what behavior you want, but assuming you want to restore the original onclick of the anchor tag after the four-second interval, I think this will work for you. You were setting link.onclick to undefined, but you really want to set it back to what it was before.

(I'm also assuming that you're intercepting the form submit and not actually navigating away from the page.)

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

function enableLink(link, onclick) {
    link.onclick = onclick;
}

function doEverything(link) {
    var oldOnclick = link.onclick;
    disableLink(link);
    setTimeout(function() {
        enableLink(link, oldOnclick);
    }, 4000);
}
<a id="downloadReportLink"
   href="#x"
   title="This function will provide you a 30 day download of all your eSign transactions."
   onclick="console.log('SUBMITTING'); doEverything(this); return false;">

   <span>Export E-Sign Information</span>
</a>

Comments