CODEWITHSUNDEEP
javascriptjqueryhyperlinkhref
MailBlade
MailBlade

Reputation: 339

Change link href/text to value of a textbox on button click?

I want to know if it's possible to have the text of an "a href" element to be the value of a textbox on a button click.

$("#btn").click(function(){
$("#myLink").text($("#Coordinate1").val());
  $("#myLink").prop("href", "https://www.google.com/maps/place/" + $("#Coordinate1").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="Coordinate1">
<button id="btn">Click</button>
<a id="myLink" href="#"><!-- THIS MUST BE VALUE OF "Coordinate1" --></a>

I hope the explanation is clear enought.

Thank you.

SOLVED: Added the code on the chosen answer below. Thanks everyone for your help all the solutions given by members worked how I wanted.

Upvotes: 0

Views: 1259

Answers (4)

S.Serpooshan
S.Serpooshan

Reputation: 8388

You can use following code:

function setLink() {
  var t = document.getElementById("Coordinate1").value;
  var h = "https://www.google.com/maps/place/" + t;
  var link = document.getElementById("myLink");
  link.href = h; //set link url
  link.innerText = h; //set link text (remove this line if you don't want it)
}
<input type="text" id="Coordinate1" oninput="setLink()">
<input type="button" value="get link" onclick="setLink()">
<div>
  <a id="myLink" href="#"></a><!-- THIS MUST BE VALUE OF "Coordinate1" -->
</div>

Upvotes: 2

vatz88
vatz88

Reputation: 2452

Seem you want to do something like this.

$("#btn").click(function(){
	$("#myLink").text($("#Coordinate1").val());
  $("#myLink").prop("href", "https://www.google.com/maps/place/" + $("#Coordinate1").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">Click</button>
<input type="text" id="Coordinate1">
<a id="myLink" href="#"><!-- THIS MUST BE VALUE OF "Coordinate1" --></a>

Upvotes: 1

Joffutt4
Joffutt4

Reputation: 1458

I believe that this is what you were asking for. I took the code you already had and just placed it within the click of a button element I added to the page. Also be sure to give an actual text value inside the a tag or it won't be clickable to the user.

$("#update").click(function() {
  $("#myLink").prop("href", "https://www.google.com/maps/place/" + $("#Coordinate1").val());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="Coordinate1">
<button id="update">update</button>
<a id="myLink" href="#">
Link
  <!-- THIS MUST BE VALUE OF "Coordinate1" -->
</a>

Upvotes: 1

ibrahim mahrir
ibrahim mahrir

Reputation: 31682

Yes, you can, but you have to do it when the user click something or finishes typing the link, or some other event. Here I use a button:

$("#change").click(function() {  // when the button is clicked, change the href to whatever in the input + the root, and change it's text to the value as well
  var value = $("#Coordinate1").val();
  $("#myLink").prop("href", "https://www.google.com/maps/place/" + value) // change the href
              .text(value); // change the text content
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="Coordinate1">
<a id="myLink" href="#">
  <!-- THIS MUST BE VALUE OF "Coordinate1" -->
</a>
<button id="change">Change</button>

Upvotes: 1

Related Questions