/    Sign up×
Community /Pin to ProfileBookmark

Text Area value as a clickable hyperlink

Copy linkTweet thisAlerts:
Aug 28.2007

hi. i’m populating a text box in a form from an excel file and if non-blank would want to show it as a hyperlink. i’m able to format the whole <a href=”www.xxxx.com”>www.xxxx.com</a> but the text box just displays the whole thing as is, not as a hyperlink.

what am i doing wrong?

thanks in advance.

to post a comment
JavaScript

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@mrhooAug 28.2007 — You can create an <a> element, assign it the textbox value as its href attribute property, insert it before the text box and append the text box to the new <a> element. That will make clicking the text box [B]act [/B]like a link.

To make it [B]look [/B]like a link you need to set its style properties to match a hyperlink's style. You could do it in a stylesheet-

a, a input{}

But why not just create a link from the data- why do you need an input control?
Copy linkTweet thisAlerts:
@dabears60090authorAug 29.2007 — thanks mrhoo. can i trouble you with the code on how to do it as you are suggesting?

i need it to be on an input control as it will be open for update, which means i've also coded an onchange event code to convert the input into a hyperlink.
Copy linkTweet thisAlerts:
@harumphAug 29.2007 — You could just have 'em double-click the cell: Throw this in the cell:

onDblClick="GoHere(this.value)"

and create a function like:

function GoHere(link){

document.location.href = "http://" + link;

}
Copy linkTweet thisAlerts:
@dabears60090authorAug 29.2007 — thanks harumph, but the requirement given to me was to display a url on the text box.
Copy linkTweet thisAlerts:
@harumphAug 29.2007 — I guess I'm not following you. Do you only want to display the URL when they click and then revert back to some other text onblur?

'Cause with this code above, if you create an input field with value="www.webdeveloper.com" and onDblClick="GoHere(this.value)", it will go there.

If you want it to show an underline on rollover, you could create a few classes:

.over {text-decoration: underline;}

.notover {text-decoration: none;}

and use a function to call them:

function highlightField(s) {

if ("INPUT"==event.srcElement.tagName)

event.srcElement.className=s;

}

and put this in the input field:

onmouseover="highlightField('over')"

onmouseout="highlightField('notover')"
Copy linkTweet thisAlerts:
@vwphillipsAug 29.2007 — I agree with mrhoo

but

[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--

function Convert(id){
var txtbox=document.getElementById(id);
var split=txtbox.value.split('>')
txtbox.value=split[1].split('<')[0];
var link=split[0].split('"')[1].split('"')[0];
var a=document.createElement('A');
a.href=split[0].split('"')[1].split('"')[0];
txtbox.parentNode.insertBefore(a,txtbox);
a.appendChild(txtbox);
txtbox.style.border='solid blue 1px';
}
//-->
</script></head>

<body>
<input id="tst" name="" value='<a href="http://www.vicsjavascripts.org.uk">www.xxxx.com</a>'>
<input type="button" name="" value="Convert to Link" onclick="Convert('tst');">
</body>

</html>[/CODE]
Copy linkTweet thisAlerts:
@harumphAug 30.2007 — Question:

Why are you putting all of this in an Excel file field:

'<a href="www.xxxx.com">www.xxxx.com</a>'

when all you really need is 'www.xxxx.com'?

You could use the database for other purposes if you did that.
Copy linkTweet thisAlerts:
@harumphAug 30.2007 — How would you edit your link? I think it's a bit more complicated than that.

How 'bout this:

(By the way, you could hide the readonly fields.)

[CODE]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
function DoIt(prototype,field){
String.prototype.stripTags = function () { return this.replace(/<([^>]+)>/g,'');}
var tmp = prototype;
var safe= tmp.stripTags();
last = safe.length;
URL = safe.lastIndexOf('//')
field.value = (safe.substring(URL + 1,last));
safe = field.value;
PutItBack(field,safe);
}

function PutItBack(link,field){
field.value = '<a href="http://' + link + '">' + link + '</a>';
}

function LoadEm(){
DoIt(document.blah.first.value,document.blah.second); // Add those fields you want to preload
DoIt(document.blah.third.value,document.blah.fourth);
//DoIt(document.blah.fifth.value,document.blah.sixth);
}

function GoHere(UseThis){
document.location.href = "http://" + UseThis;
}
//-->
</script>
</head>

<body onload="LoadEm()">
<form method=post name="blah">
<input type="text" id="first" name="first" value='<a href="http://www.WebDeveloper.com">www.WebDeveloper.com</a>' size="75" readonly><!-- Hide this field if you want //--><br><input type="text" id="second" name="second" onblur="PutItBack(this.value,first)" size="30"><input type="button" value="Edit Link" onclick="DoIt(first.value,second);">&nbsp;&nbsp;<input type="button" value="Visit Link" onclick="GoHere(second.value);"><br>
<input type="text" id="third" name="third" value='<a href="http://www.CNN.com">www.CNN.com</a>' size="75" readonly><!-- Hide this field if you want //--><br><input type="text" id="fourth" name="fourth" onblur="PutItBack(this.value,third)" size="30">
<input type="button" value="Edit Link" onclick="DoIt(third.value,fourth);">&nbsp;&nbsp;<input type="button" value="Visit Link" onclick="GoHere(fourth.value);">
</form>
</body>
</html>
[/CODE]
×

Success!

Help @dabears60090 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...