JavaScript - Changing href value

Asked By Lokesh M on 05-Nov-08 03:09 AM

I would like to change href value dynamically through javascript...

For Example:

There are two buttons, and one hyperlink..

when i click on button1, i would like to change the href value through javascript and then if i click on hyperlink -> it should redirect to abc.html

when i click on button2, i would like to change the href value through javascript and then if i click on hyperlink -> it should redirect to def.html

similary for buttonN...

Please advise me.. Thanks

re

Web Star replied to Lokesh M on 05-Nov-08 03:30 AM

<html>
<head>
<style type="text/css">

a {display: block; font: 500% tahoma; color: crimson;}

</style>
<script type="text/javascript">

function setLinkText(sLink_id, sText)
{
var el;
if (document.getElementById
&& (el = document.getElementById(sLink_id))
|| document.all
&& (el = document.all[sLink_id]))
{
while (el.hasChildNodes())
el.removeChild(el.lastChild);
el.appendChild(document.createTextNode(sText));
}
}

onload = function()
{
setTimeout("setLinkText('foo1', 'zippity');", 2000);
setTimeout("setLinkText('foo2', 'doo');", 3000);
setTimeout("setLinkText('foo3', 'dah !');", 3500);
}

</script>
</head>
<body>
<a id="foo1" href="#">z</a>
<a id="foo2" href="#">d</a>
<a id="foo3" href="#">d</a>
</body>
</html>

Change href value

mv ark replied to Lokesh M on 05-Nov-08 03:46 AM

Try this snippet -

<SCRIPT LANGUAGE="JavaScript">
function setLink(link){
document.getElementById('myLink').href= link
}
</SCRIPT>
</HEAD>
<BODY>
<A ID="myLink" HREF="http://www.google.com/">Google</A>
<INPUT TYPE="button" VALUE="Redirect to Yahoo" ONCLICK="setLink('http://www.yahoo.com/')">
</BODY>

In each button's ONCLICK event, call the setLink function with a different URL or filename

Try this

sri sri replied to Lokesh M on 05-Nov-08 03:57 AM

Hi,
try the below code

<script type="text/javascript" language="javascript">
        function setURL(para)
        {
           document.getElementById("<%=hidText.ClientID%>").value = para;
           return false;
        }

        function ReDirect()
        {

            location.replace(document.getElementById("<%=hidText.ClientID%>").value);
            return false;
        }
    </script>

<a href="javascript:ReDirect();">Link</a>
        <br />
        <br />
        <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" OnClientClick="return setURL('Page1.aspx');"
            Text="Link1" /><br />
        <br />
        <asp:Button ID="Button2" runat="server" OnClick="Button2_Click" OnClientClick="return setURL('Page2.aspx');"
            Text="Link2" /><br />
        <br />
        <asp:Button ID="Button3" runat="server" OnClick="Button3_Click" OnClientClick="return setURL('Page3.aspx');"
            Text="Link3" /><br />
        <br />
        <asp:HiddenField ID="hidText" runat="server" />

read this link to change href value

C_A P replied to Lokesh M on 06-Nov-08 05:42 AM

Really simple:

<a id="Link1" href="#" onclick="
this.innerHTML = 'WXYZ';">ABCD</a>

With a function, passing a reference:

<a id="Link1" href="#" onclick="modText(this);">ABCD</a>

<script type="text/javascript">
function modText(ele){
ele.innerHTML="WXYZ";
}
</script>

As above, but using DOM rather than the non-standard innerHTML:

<a id="Link1" href="#" onclick="modText(this);">ABCD</a>

<script type="text/javascript">
function modText(ele){
ele.childNodes[0].nodeValue = "WXYZ";
}
</script>

read this code change href value

C_A P replied to Lokesh M on 06-Nov-08 05:50 AM

Code (javascript)

<html>
<head>
<script type="text/javascript">
function changeLink()
{
document.getElementById('myLink').innerHTML="WebSewak";
document.getElementById('myLink').href="http://www.websewak.com";
document.getElementById('myLink').target="_blank";
}
</script>
</head>
<body>

<a id="myLink" href="http://www.yah.in">Yah.in Collection</a>
<input type="button" onclick="changeLink()" value="Change link">

</body>
</html>

more info on
http://www.vbforums.com/showthread.php?t=361599

read this code

C_A P replied to Lokesh M on 06-Nov-08 05:50 AM

<html>

<head>

<script language="JavaScript"><!--
function findLinkByHref(href) {
  for (var i=0; i<document.links.length; i++) {
    if (document.links[i].href == href) return i;
  }
  return -1;
}

function changeLinkHref(id,newHref,oldHref) {
  if (document.links.length > 0) {
    if (document.getElementById) {
      document.getElementById(id).href = newHref;
    }
    else if (document.all) {
      document.all[id].href = newHref;
    }
    else {
      var index = findLinkByHref(oldHref);
      if (index > -1)
        document.links[index].href = newHref;
    }
  }
}
//--></script>

</head>

<body>

<a id="myLink" href="http://www.mozilla.org">somewhere</a>

<form>
<input type="button" value="Change href" onClick="changeLinkHref('myLink','http://www.irt.org','http://www.mozilla.org')">
</form>

</body>

</html>