?
Solved

Setting LinkButton Attributes Using JavaScript

Posted on 2010-01-11
14
Medium Priority
?
979 Views
Last Modified: 2012-05-08
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");
}
0
Comment
Question by:Ray Turner
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
  • 4
  • +1
14 Comments
 
LVL 3

Expert Comment

by:infochandru
ID: 26290045
I think may be probs with id,
Hope this will help,

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

Author Comment

by:Ray Turner
ID: 26290384
Thanks.  That did not work.
0
 
LVL 3

Expert Comment

by:infochandru
ID: 26290414
can you give me the asp tag for link button that you used?
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 3

Expert Comment

by:infochandru
ID: 26290479
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="http://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>
0
 
LVL 14

Expert Comment

by:robasta
ID: 26290652
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.
0
 
LVL 4

Expert Comment

by:maheshsnkr
ID: 26290828
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;
    }
0
 

Author Comment

by:Ray Turner
ID: 26292010
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

0
 
LVL 14

Expert Comment

by:robasta
ID: 26292029
var myLink = document.getElementById('<%=lbtnAnotherPage.ClientID%>');
0
 

Author Comment

by:Ray Turner
ID: 26292121
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')
0
 
LVL 14

Expert Comment

by:robasta
ID: 26292426
1.ONMouseOver:
myLink.setAttribute('text-decoration', 'underline');

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

Expert Comment

by:robasta
ID: 26292467
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;
        }
0
 
LVL 14

Accepted Solution

by:
robasta earned 1000 total points
ID: 26292501
Made a mistake in the previous post:

 function setLinkButton(btnState) {          
            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;
        }


<asp:LinkButton ID="lbtnAnotherPage" runat="server" PostBackUrl="~/PhotoAlbum.aspx" onmouseover="setLinkButton('on')" onmouseout="setLinkButton('off')">LinkButton</asp:LinkButton>
      
0
 
LVL 3

Assisted Solution

by:infochandru
infochandru earned 1000 total points
ID: 26292550
Hope this will helps you,

        <script language="javascript" type="text/javascript">
        function setLinkButton(lnkbtn,val) {
           
            lnkbtn.innerHTML = "Display Text";
            lnkbtn.target = "_blank";
            lnkbtn.href = "http://yourURL.com";
            if(val == "on")
                lnkbtn.setAttribute('text-decoration', 'underline');
            else
                lnkbtn.setAttribute('text-decoration', 'none');
            return false;
        }
    </script>

<asp:LinkButton ID="lbtnAnotherPage" runat="server" PostBackUrl="~/PhotoAlbum.aspx" onmouseover="setLinkButton(this,'on')" onmouseout="setLinkButton(this,'off')">LinkButton</asp:LinkButton>
0
 

Author Closing Comment

by:Ray Turner
ID: 31675918
Thanks!!!
0

Featured Post

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question