Href behaviour - need clarity [duplicate]

Question

I have code like this on the profile page of my website.

<div class="col-md-4">
    <h2 class="textclass2" style="text-decoration: underline; margin-bottom: 10px"><%=playerdata.Player_Name%>   AKA  <%=playerdata.Player_NickName%></h2>
    <a class="btn btn-dark btn-xs" href="<%=playerdata.Player_FBLink%>" id="fbclick" onClick="checkUrl()" style="font-size: 12px; color:#40FF40; margin-bottom: 10px "> Facebook </a>
    <a class="btn btn-dark btn-xs" href="<%=playerdata.Player_InstagramLink%>" role="button" style="font-size: 12px; color:#40FF40; margin-bottom: 10px"> Instagram </a>
    <a class="btn btn-dark btn-xs" href="<%=playerdata.Player_LinkedinProfile%>" role="button" style="font-size: 12px; color:#40FF40; margin-bottom: 10px"> LinkedIN </a>
    <a class="btn btn-dark btn-xs" href="<%=playerdata.Player_TwitterLink%>" role="button" style="font-size: 12px; color:#40FF40; margin-bottom: 10px"> Twitter </a>

This is done using EJS. They are basically href tags that have the URL string of the users social pages. The backend is a MongoDB

Question - If I enter a valid URL in the respective field in the database, I am getting redirected to the correct URL. However if the string is empty, its posting a GET request to /profile/:username.

Is this the way href tags normally behave? If yes, what is the way to circumvent. Basically if the string is empty, I don't want to execute a GET call, but simply flash a message to the user saying that the string is empty.

Answer 1

If there is no href then <a> will behave just like a <span>. If there is a blank href then it will inherit it from whatever the URL in the addressbar happens to be. So one option is not print the link at all if there is no, say Twitter link

Other option if you want to display some alert is to use href:script

  <% if (playerdata.Player_TwitterLin) { %>
    <a class="btn btn-dark btn-xs" href="<%=playerdata.Player_TwitterLink%>" role="button" style="font-size: 12px; color:#40FF40; margin-bottom: 10px"> Twitter </a>
  <% } else { %>
  <a class="btn btn-dark btn-xs" href="javascript:alert('Twitter link not available')" role="button" style="font-size: 12px; color:#40FF40; margin-bottom: 10px"> Twitter </a>
  <% } %>