<$BlogRSDUrl$>


Loser's Guide Loser's Guide

 Loser's Guide to Life

Saturday, October 25, 2008

Clickable Links in a From 

For aeons man has wanted to know how to make a clickable link appear in a form. If you search Google for it with all the related terms, you'll get all kinds of interesting stuff not exactly about that, but the result seems to be that it can't be done: data appearing in a form box were never meant to be clicked, and besides, why would you want to do that?

But you might. Some of the data might be in the form of links. You might want to click on them. What's so weird about that?

Anyway, you can do this, I've finally discovered, by using one of two methods, “createTextNode” and “innerHTML”. Nobody in the javascript community seems to want to talk about it, though.


This is just a test form, but you could put a whole list of links in if you wanted.

What you do is, first rewrite the links as javascript-friendly pieces: for example,
<a href="http://www.google.com">Google</a>
becomes
"<a href=" + "http://www.google.com" +">" + "Google" + "</a>" ;
that is, the tags and their content have to be separately in quotation marks and each piece except for the first has to be preceded by a plus sign.

Then you direct this data to a hidden input box.
<input type="hidden" name="links" value="" />.

Then you add a <div> where you want the links to appear, presumably right underneath the form or near it:
<div id="linkdiv"> </div>

Then you add a button to perform a little code:
<input type="button" value="Show Links" onclick="showLinks()" />

Then, in the <head> area, you add the code for this function:

<script type="text/javascript">
function showLinks() {
var f = document.getElementById('linkdiv').innerHTML = document.myform.links.value;
}
//NB “myform” will be the name you give to the form.

function closeLinks() {
var clear = document.getElementById('linkdiv').innerHTML=" ";
}
</script>
The closeLinks() function can be called from the initial part of the form so that it will clear out the previous data each time. For example:
<select name="myselect" onchange="showInfo();closeLinks()">
Etc.

Labels:



0 Comments:

Post a Comment


Watching TV is a good way to tear yourself away from the computer.