Href behaviour - need clarity

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.

you can just not render href `<%=playerdata.Player_FBLink ? 'href="' + playerdata.Player_FBLink + '"' : ''%>` — Xesenix, Jun 14 '20 at 03:13
on of the url FB has onClick `checkUrl()` this will defiantly call this function. from code behavior is not clear, empty URL will always point to same page, please share more code or explain more. its possible you also have an internal function which get called before.. You need to debug the code to see flow of code execution — Learning, Jun 14 '20 at 03:30

Vinay · Accepted Answer · 2020-07-04T12:01:25.317

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>
  <% } %>

Href behaviour - need clarity

1 Answers1