Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Setting LinkButton Attributes Using JavaScript

Posted on 2010-01-11
14
Medium Priority
?
1,034 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
  • 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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

577 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