Replace Link URL on Click/Tap

A user of the Willmaster below-article anonymous feedback form asked how to replace a link with a different URL after it has been tapped.

This article describes how to do it.

It makes sense to change a link URL only when tapping the first link URL will not take the browser off the current page. An example is a link URL with the javascript: protocol, like

<a href="javascript:alert('hello')">Tap</a>

For illustration (live example in a moment), there is an "Are you sure…?" type of message when "Example link" is first tapped. Simultaneously the a tag link's href URL is changed to a second URL; this time, the URL of another page.

A second tap takes the browser to the new link URL.

Live Example

Here is the live example:

Code and How-to Information

This is the code for the above example. How-to information follows.

<a 
   href="javascript:DisplayInfoAndChangeURL()" 
   id="tappedlink">
Example link.
</a>

<div 
   id="tapmessage" 
   style="display:none;">
<span style="background-color:yellow;">
Are you sure you want to visit the example.com website? 
If yes, tap the link again.
</span>
</div> 

<script>
function DisplayInfoAndChangeURL()
{
    var URL = "http://example.com/";
    document.getElementById("tappedlink").setAttribute("href",URL);
    document.getElementById("tapmessage").style.display="block";
}
</script>

How-to Information

The code is in three sections, the link, the first-tap message, and the JavaScript.

The example is intended to provide the basic idea. The code can be reused and modified for other URL-replacement link implementations.

1. The Link — The link is an a tag with id and href attributes. The href value is a javascript: protocol URL that calls DisplayInfoAndChangeURL() (the JavaScript function name). The tappedlink id value will be referenced in the JavaScript.

2. The First-tap Message — The tapmessage id value will be referenced in the JavaScript in order to display it.

3. The JavaScript — The function name is DisplayInfoAndChangeURL(), called when the a tag link is clicked.

   The working first code line in the function specifies http://example.com/ for the new link URL.

   The second working code line changes the a tag's href attribute value to the new link URL. The tappedlink id value is used as reference.

   And at the third working code line, the tapmessage id value is used as reference to display the first-tap message.

That is all the functionality and all the code to make it happen.

Uses

The first-tap message functionality of the example link is for illustration purposes. The functionality can be changed to whatever you want to happen when the link is tapped, in addition to changing the link URL, or it can be removed altogether.

(Generally, the JavaScript would do something in addition to changing the link URL. But it is optional.)

I don't know what implementation the querist had in mind when they used the anonymous feedback form to ask how to change a link URL when it is tapped.

This functionality has never found a use in our websites. So I'm having to imagine how it might be employed. I'll mention two possibilities:

1. Alternatives to the two-tap illustration's "Are you sure…?" message may be implemented. Here are a couple ideas:

   • Remember to type in your CCCC discount code for an even better deal.

   • After you buy, be sure to forward the receipt to us for the bonus!

2. If a page or other document needs to be created for the user (perhaps a PDF) that generally takes a second or two, the first tap might start the creation process and display this message:

   Creating your document takes about a second, perhaps 2. Count to 2 and then tap the link again to view the new creation.

Whatever you use it for or think it might be good for, let me know via the anonymous feedback form below. Thank you!

(This article first appeared with an issue of the Possibilities newsletter.)

Will Bontrager