CODEWITHSUNDEEP
javascripthtmljqueryanchor
user15895653
user15895653

Reputation: 157

link is not coming on using with <a> tag

I am trying to incorporate link into my html using tag but its not coming clickable. what i am doing wrong?

<div>
  <p id="notsigned_in" style="text-align: center;">Please <a href='"https://one.vistas.com/saml_login/login?ReturnTo=//content/en_us/me/entry.html?concern=" + encodeURIComponent($("#concern").val())'>Sign in</a> if you want to view your employee's contact information</p>
</div>

Upvotes: 0

Views: 80

Answers (3)

Kinglish
Kinglish

Reputation: 23664

You can't insert javascript into html directly like that. You would add this dynamic link after the page loads. Also included here is an event handler to update the link in case that #concern value changes

$(document).ready(function() {
  updateLink()
  $('#concern').on('input', updateLink)
})

function updateLink() {
  $('#notsigned_in a').attr('href', `https://one.vistas.com/saml_login/login?ReturnTo=//content/en_us/me/entry.html?concern=${encodeURIComponent($("#concern").val())}`);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id='concern' value='the concern value' />
<div>
  <p id="notsigned_in" style="text-align: center;">Please
    <a href=''>Sign in</a> if you want to view your employee's contact information</p>
</div>

Upvotes: 0

Salvino D&#39;sa
Salvino D&#39;sa

Reputation: 4506

You can't insert js code directly in html tag like you have done above.
Try this code:

function onLinkClicked() {
  let concern = encodeURIComponent($("#concern").val());
  let link = "https://one.vistas.com/saml_login/login?ReturnTo=//content/en_us/me/entry.html?concern=" + concern;
  console.log(link);
  location.href = link;
}
.centered {
  text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  Concern: <input id="concern" name="concern" value="452112442"> <br />
  <p id="notsigned_in" class="centered">Please
    <a href='javascript:;' onclick="onLinkClicked()">Sign in</a> if you want to view your employee's contact information
  </p>
</div>

Upvotes: 0

Anton Neverov
Anton Neverov

Reputation: 311

HTML - is not javascript. In your case you can use this code:

<a href="" id="link">LINK HERE</a> //Just link without href

<script>
   //Adding href to link
  const baseUrl = 'https://one.vistas.com/saml_login/login?ReturnTo=//content/en_us/me/entry.html?concern=';
  document.getElementById('link').href = baseUrl + encodeURIComponent($("#concern").val());
</script>

PS. Sorry for vanilla JS in jQuery project, but it simpler for myself, then jQuery.

Upvotes: 1

Related Questions