View Full Version : Changing href attribute of anchor tag dynamically

Mr Dude
11-20-2008, 05:47 AM
Hi Everyone,

I want my web page users to be able to click on an anchor and have that anchor forward the user to a page based upon the value in a script array.

Essentially I want to be able to dynamically change the value of the href attribute within the anchor tag.

My relevant web page code is as follows:

<a href="DocBody.htm" id="urlToLoad" target="Body" onClick="loadPage('urlToLoad')">
<img src="pictures/pageelements/Circular_Grey.png" id="tickButton" border="0" width="60" height="60"></a>

I have italisized part of the code above to indicate that I am working with frames. However it is my hope that the use of frames will not adversley affect my intended page behaviour.

I have the following script which I link to from my page:

var urlPages = ("DocBody.htm","pages/education.htm","pages/currentemployment.htm","pages/workhistory.htm","pages/email_promotions.htm","pages/graphic_design.htm","pages/printed_promotions.htm","pages/programming.htm");

function loadPage(urlName)
var urlObject = document.getElementById(urlName);
urlObject.setAttribute('href', urlPages[Index]);

It hasn't made any difference whether I use a concrete value initially for the href tag (e.g.: DocBody.htm) or a simple # symbol. In both instances the href attribute is not changing dynamically as I intend.

In all instances the initial href value is loaded everytime that the link is clicked.

I have searched and searched the internet for tutorials / suggestions, and so far I have come up empty.

Any assistance with this will be greatly appreciated.

Kind Regards


11-20-2008, 06:49 AM
You can access it in virtually every browser just by anchor_object.href:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<script type="text/javascript">
// <![CDATA[
function changeURLOfAnchorWithID(anchor_id,new_href)
document.getElementById("my_anchor").href = new_href;

function formOnSubmit(formElm)
return false;
// ]]>

<form onsubmit="return formOnSubmit(this)">
<input type="text" name="new_url" value="http://www.google.com" /><br />
<input type="submit" value="change href" />
<br />
<a id="my_anchor" href="">You can change my href!</a>


Mr Dude
11-21-2008, 04:58 AM

Thanks for making the effort to reply to my post. I am very impressed by the code that you created. Unfortunatley it does not meet my requirements. This is because I want the link to effectively change itself.

I am not sure that the above statement makes a lot of sense. But using your code as an example you essentially have 2 control elements. 1 being the link itself and the other being the form button.

I really need to change the value of the link via the link itself. I am now thinking that this simply can't be achieved with client side scripting, and will likely need some form of server side code.



12-02-2008, 04:38 PM
You absolutely can do it client-side (sorry for the late response - I lose track of threads sometimes).

Just explain your specifications. For example:
1) When the user clicks on the link, it changes itself to X href.
2) On the initial click, the user isn't taken anywhere, all that happens is a change of href. However on any subsequent clicks, the user is taken to the new href.
2) On the initial click, the user is taken to the new href.

Either way it's definitely possible :)

Mr Dude
12-03-2008, 12:23 AM

Thanks for continuing to offer your support. I have managed to complete my intended task without using Server Side code. :thumbsup:

I learned that my challenge was more related to the structure of Framed documents than to JavaScript itself. Although there were many good tutorials on the net concerning Frames and JavaScript, I was not able to find one that was very clear concerning nesting.

I would see an example like this;

parent frame
| |
| |
Child 1 Child 2
| | |
Sub-Child 1 | |
| |
Sub-Child 2 |
Sub-Child 3

And I worked on the assumption that the complete frame structure could be contained in one document:

<frameset cols="30%, *">
<frame src="Child 1.htm">
<frameset rows="20%, 50%, *">
<frame src="Sub-Child 1.htm">
<frame src="Sub-Child 2.htm">
<frame src="Sub-Child 3.htm">

However I found when referencing the frames using JavaScript that it was necessary to contain each frameset in it's own html file.

As a result of keeping each frameset separated into it's own html file I was able to navigate as I intended.

Thanks again for your assistance.

Kind Regards,