CODEWITHSUNDEEP
javascripthtml
user2608865
user2608865

Reputation: 11

dynamically display url link using javascript

I am trying to figure out how I can dynamically display a link in the href of an html a tag. I currently have the below code that displays the values as I type but I would like to have this code display a click url in the a tag href.

Can someone please help?

HTML form code:

<input type="text" id="testTextareadestinationurl" autocomplete="off" size="57" maxlength="2500" name="destinationurl" class="required"/>
<span id='UrlDestinationurl'><?php echo  $destinationurl;?></span>
<a href="" target="_blank"><img src=""></a>

javascript code:

var testTextareadestinationurl = document.getElementById('testTextareadestinationurl');
testTextareadestinationurl.onkeydown = updateUrlDestinationurl;
testTextareadestinationurl.onkeyup = updateUrlDestinationurl;
testTextareadestinationurl.onkeypress = updateUrlDestinationurl;
function updateUrlDestinationurl() {
    document.getElementById('UrlDestinationurl').innerHTML = this.value || "";
}

function display(msg) {
    var p = document.createElement('p');
    p.innerHTML = msg;
    document.body.appendChild(p);
}

Upvotes: 1

Views: 2705

Answers (1)

Plymouth223
Plymouth223

Reputation: 1925

You're basically missing this from your updateUrlDestinationurl function:

document.getElementById('anchorUrlDestinationurl').href = "http://" + this.value || "";

Assuming you give an id of 'anchorUrlDestinationurl' to your target <a> element.

Don't prepend "http://" depending on what you want to type into the input.

Here's a fiddle.

P.S. you don't need to handle all three of those keypress events but I assume your code is a subset of something...

Upvotes: 2

Related Questions