Only want a link to be able to be clicked once

Question

I have a link that opens a new page and I was wondering if there was a way that would make the link only click-able once so the form cannot be submitted numerous times.

<div id="addSection"><a class="addSection" 
    onclick="javascript:writeBookmark(this); var newwin = window.open('<c:url value="/URL_WINDOW"/>', 
    'additional', 'width=400,height=280,toolbar=no,,menubar=no,scrollbars=yes,resizeable=no'); newwin.focus(); return null;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    Add sub

I have JavaScript to do this with buttons but not sure how to do it when I am not dealing with buttons.

Answer 1

First, I would move your click handler so that it's not applied inline. Then, I would add some code to the handler to either remove the link itself or replace the click handler with one that pops up a message that the link can only be used once.

Example (using jQuery)

$('.addSection').on('click', function(e) {
    e.preventDefault();
    writeBookmark(this);
    var newwin = window.open('<c:url value="/URL_WINDOW"/>', 
                             'additional',
                             'width=400,height=280,toolbar=no,,menubar=no,scrollbars=yes,resizeable=no');
    newwin.focus();
    $(this).off('click').on('click', function() {
        alert('You've already performed this action');
    });
});