Changing anchor tag text on click – and stop double clicks!

From time to time we want to prevent double clicks on a link – but also give notification to the user that something is happening on the back end.

So we decide that on click of our link, we want to change the text to put in a spinner and stop double clicks while we wait for the server to return a response.

Say you need to call an API is real time and it take a few seconds, try this anchor tag code:

This implementation (using Bootstrap spinners and line-awesome)

<a href="yoururl.html"
    class="btn btn-outline-dark"
    onclick='this.innerHTML="<i class=\"spinner-border spinner-border-sm\"></i> Updating";
    this.preventDefault();'>

    <i class="la la-user"></i> Update User

</a>

The key bit is the onclick command:

onclick='this.innerHTML="<i class=\"spinner-border spinner-border-sm\"></i> Updating"; 
this.preventDefault();'

The innerHTML is what you want the text of your anchor tag to change to. It also allows you to have HTML in the button – which means you can put in the Bootstrap spinners.

The this.preventDefault() stops the double click.

This code changes this button:

Into this when clicked:

I hope that is useful in your UX journey!