asked on

Setting LinkButton Attributes Using JavaScript

Is there a way to set the attributes of the ASP.Net LinkButton control using JavaScript?

How do I get the following code to work?

myLink is null.

function setLinkButton() {
var myLink = document.getElementById("lbtnAnotherPage");
}

infochandru

I think may be probs with id,
Hope this will help,

<script type="text/javascript">
function setLinkButton() {
var myLink = document.getElementById('<%=lbtnAnotherPage.ClientID%>');
}
</script>

RayT

ASKER

Thanks. That did not work.

infochandru

can you give me the asp tag for link button that you used?

infochandru

Try this code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
function setLinkButton() {
var myLink = document.getElementById('<%=lbtnAnotherPage.ClientID%>');
myLink.innerHTML="Experts-Exchange";
myLink.href="https://www.experts-exchange.com";
myLink.target="_blank";
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:LinkButton ID="lbtnAnotherPage" Text="Test" PostBackUrl="~/Default.aspx" runat="server"></asp:LinkButton>
<br />
<asp:Button ID="btn" runat="server" Text="Test" OnClientClick="return setLinkButton()" />
</div>
</form>
</body>
</html>

robasta

The code you posted works as expected. I ran it as-is in Firefox.
Changes the linkbutton to point to expertsexchange, with target being _about.

maheshsnkr

hi rgturner,

Try the below code snippet...

function setLinkButton() {
var lnkbtn = document.getElementById('lbtnAnotherPage');
lnkbtn.innerHTML="Display Text";
lnkbtn.target="_blank";
lnkbtn.href="http://yourURL.com";
return false;
}

RayT

ASKER

Here is the entrie snippet of code. I am still getting an error where lnkbtn = null

    <script language="javascript" type="text/javascript">
        function setLinkButton() {
            var lnkbtn = document.getElementById('lbtnAnotherPage');
            lnkbtn.innerHTML = "Display Text";
            lnkbtn.target = "_blank";
            lnkbtn.href = "http://yourURL.com";
            return false;
        }
    </script>

<asp:LinkButton ID="lbtnAnotherPage" runat="server" PostBackUrl="~/PhotoAlbum.aspx" onmouseover="setLinkButton()">LinkButton</asp:LinkButton>

Open in new window

robasta

var myLink = document.getElementById('<%=lbtnAnotherPage.ClientID%>');

RayT

ASKER

That works. I can now access the object. How can I do the following?

1. On mouse Over turn on the underline.
2. On mouse out turn off the underline.
3. Modify the setLinkButton function to accept two parameters (the object ID, the action (i.e. 'on' or 'off')

robasta

1.ONMouseOver:
myLink.setAttribute('text-decoration', 'underline');

2.OnMouseOut:
myLink.setAttribute('text-decoration', 'none');

robasta

function setLinkButton(btnState) {
if (btnState =='on')
myLink.setAttribute('text-decoration', 'underline');
var lnkbtn = document.getElementById('lbtnAnotherPage');
lnkbtn.innerHTML = "Display Text";
lnkbtn.target = "_blank";
lnkbtn.href = "http://yourURL.com";
if (btnState =='on')
myLink.setAttribute('text-decoration', 'underline');
else
myLink.setAttribute('text-decoration', 'none');

return false;
}

ASKER CERTIFIED SOLUTION

robasta

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

infochandru

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

RayT

ASKER

Thanks!!!