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

Question

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.

Answer 1

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>

Answer 2

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>

Answer 3

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>

Answer 4

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>