Jaykumar Jaykumar - 3 months ago 7
HTML Question

Disable hyperlink after submitting the form

I am trying to disable a hyper link once it is clicked. I found a solution to use

onSubmit
function because this will allow the form to submit and then it disables the link immediately but in here it is not doing so.

I've also written a
JavaScript
function but the problem is that how would I invoke this function after the button is clicked.

JS

function disableLink() {
if(document.getElementById('downloadReport').clicked = true) {
document.getElementById('downloadReport').disabled = true;
}
}


Form:

<td class="dataFieldCell">
<div class="esignNavigation">
<s:if test="%{#parameters.showReport}">
<a href="#x" id="downloadReport" style="width:155px" title="This function will provide you a 30 day download of all your eSign transactions." onSubmit="document.getElementById('viewIntegrationReport').disabled=true"><span>Export E-Sign Information</span></a>
</s:if>
</div>
</td>


Please let me know if anyone has done something similar to this.

Thanks.

Answer

An anchor element a is not a form element, so it will not trigger the onsubmit event. You need to bind to the 'click' event and handle the click state yourself. The 'disabled' attribute for anchor elements is not honored on all browsers, so you cannot rely on it for behavior or to change appearance. You would need to add a class to the element and CSS for that class to make it appear disabled.

var elem = document.getElementById("download");
elem.addEventListener("click", myFunction, false);

var download_clicked = false;
function myFunction(ev) {
  if(download_clicked) {
    ev.stopPropagation();
  } else {
    alert("One time!");
    download_clicked = true;
    elem.classList.add("disabled");
  }
}
a.disabled {
  color: #aaa;
  text-decoration: none;
  cursor: default;
}
<a href="#" id="download">This Works</a>
<br>
<a href="#" id="download2" onclick='alert("Every Time!\ndisabled="+this.disabled);this.disabled=true;'>This doesn't</a>

Comments