Help with javascript/link button/changing link button text

I have read various posts and articles on the web, but for some reason I can't get this to work. Not sure if it is because I use master pages and so the javascript is not declared in the header tag?

Ultimately, what I am try to achieve is this. I have a link button, the default text is "miles". When the user clicks on the link button it should change to "kilometres". So, basically a user can keep clicking on the button the and text should change to either miles or kilometres. I can get this to work ok with vb but I need to avoid a postback to the server and so use javascript.

Firsty, I am trying to just get the linkbutton text to change from miles to kilometres when I click on it, but basically nothing happens. Here is my code and code behind. Can any body assist? MArco

ASPX

<%@ Page Language="VB" MasterPageFile="~/main.master" AutoEventWireup="false" CodeFile="javascript.aspx.vb" Inherits="javascript" title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">Javascript button test:<br />
<script type="text/javascript">

function changeMetric()
{
document.getElementById(
"lbtnMetric").innerText = "kilometres";
}

</script>
<
asp:LinkButton ID="lbtnMetric" runat="server" Text="miles"></asp:LinkButton><br />
</asp:Content>

APPX.VB

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

lbtnMetric.Attributes.Add("OnClick", "javascript:changeMetric();")

End Sub


Marco Gwiliani

0
marco
1/12/2009 6:12:39 PM
asp.net.getting-started 91979 articles. 4 followers. Follow

8 Replies
1552 Views

Similar Articles

[PageSpeed] 31
Get it on Google Play
Get it on Apple App Store

You need to use the clientID of the lbtnMetric control! You can see it in your source or by <%lbtnMetric.ClientID %>

Edit: The best way is to change your code to

function changeMetric(linkbutton){

var linkbuttonelement = document.getElementById(linkbutton);
linkbuttonelement.innerText = 'Kilometres';}

In your aspx:
string javascriptChangeMetric = String.Format("javascript:changeMetric('{0}');", lbtnMetric.ClientID.ToString());
lbtnMetric.Attributed.Add("onclick", javascriptChangeMetric);

 

Hope it helps

 

 

 

 


Jef Claes
~~~~~~~~~~

Visit my blog
0
Nemesis116
1/12/2009 6:40:33 PM

change the lines as..

 

function changeMetric(objLink)
{
 objLink.innerText = "kilometres";
 return false;
}

// on server side..
lbtnMetric.Attributes.Add("OnClick", "javascript:changeMetric(this);")
 
Always remember to click “Mark as Answer” on the post that helps you. Thank you!


- Regards,
Paresh Jagatia
http://pareshjagatia.blogspot.com
0
pareshjagatiya
1/12/2009 6:43:05 PM

 Here is the correct way:

 

 
<asp:LinkButton ID="lbtnMetric" runat="server" Text="miles" OnClientClick="changeMetric(this);" ></asp:LinkButton><br />

function changeMetric(obj)
{
if(obj.innerText.toUpperCase() == 'MILES')
{
obj.innerText= 'kilometer';
obj.href= 'text goes here';
}
else if (obj.innerText.toUpperCase() == 'KILOMETER')
{
obj.innerText = 'miles';
}
}
 
In place of text goes here put: # 
  
Thanks,
Karan

~ Remember To Mark The Post(s) That Helped You As The ANSWER ~
0
karan
1/12/2009 6:47:31 PM

Hello - im not sure what the obj.href does so I have commented it out. The problem noe seems to be that when I click in the link button the page is still posting back and so the text of the link button remains as miles, which is obviouly caused by the postback. Do I somehow need to stop the link button from causing a postback? MArco

Here is the code at the moment

<asp:LinkButton ID="lbtnMetric" runat="server" Text="miles" OnClientClick="changeMetric(this);"></asp:LinkButton><br />

<script type="text/javascript">

function changeMetric(obj)
{
if(obj.innerText.toUpperCase() == 'MILES')
{obj.innerText=
'kilometer';}
//obj.href= 'text goes here';}
else if (obj.innerText.toUpperCase() == 'KILOMETER')
{obj.innerText =
'miles';}}
</script>


Marco Gwiliani

0
marco
1/12/2009 7:44:27 PM

 if you use
obj.href = '#'

then the page won't postback and my code above will work


Thanks,
Karan

~ Remember To Mark The Post(s) That Helped You As The ANSWER ~
0
karan
1/12/2009 7:58:27 PM

Hello - Im afraid the page is still posting back? Im using VWD 2005 ASP.NET VB. Any ideas? Thanks MArco

Here is the code:

<asp:LinkButton ID="lbtnMetric" runat="server" Text="miles" OnClientClick="changeMetric(this);"></asp:LinkButton><br />

<script type="text/javascript">
function
changeMetric(obj)
{
if(obj.innerText.toUpperCase() == 'MILES')
{obj.innerText=
'kilometer';}
obj.href=
'#';}
else if (obj.innerText.toUpperCase() == 'KILOMETER')
{obj.innerText =
'miles';}}

</script>


Marco Gwiliani

0
marco
1/12/2009 8:11:59 PM

 ok first thing there is a syntax error in your above javascript, there is an extra } after 'kilometer'

so try with this:

function changeMetric(obj)
{
    if(obj.innerText.toUpperCase() == 'MILES')
    {
        obj.innerText= 'kilometer';
        obj.href= '#';
    }
    else if (obj.innerText.toUpperCase() == 'KILOMETER')
    {
        obj.innerText = 'miles';
    }
 } 

 

I have tested this and it is working


Thanks,
Karan

~ Remember To Mark The Post(s) That Helped You As The ANSWER ~
0
karan
1/12/2009 8:16:56 PM

Cheers Karan, thats done it.

Regards MArco.


Marco Gwiliani

0
marco
1/12/2009 8:21:32 PM
Reply:

Similar Artilces:

Vb.Net:Change the text of link button
Hi, I have a linkbutton in my datagrid Initially, I set the text of the link button as "show" once user click it, i want it to change into "view more detail" I tried to change as below but it lose its hyperlink function and just as a text only dim dgitem as datagridItem  For Each dgitem In DataGrid1.Items dgitem.Cells(7).Text = "view more detail" Next can anyone give me direction Thanks in advance   You can cast the sender of the control at Button Click event..see belowProtected Sub LinkButton1_Click(ByVal sender As Object, ByVal e As Eve...

change other image button image by click html link button by javascript code ?
Hello friend,I want to know that how to change other image button image by click html link button by javascript code ?Please give me reply as soon as possible.Thanks,Rupen   You can try this:<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %><!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"> &nb...

Sort link button by text of button?
I have more than 30 link buttons on the page. How to sort link buttons by text of buttons?     Where do you get the text?  Assuming they're in a DataGrid or similar templated control, the easiest way to do this is going to be to sort the datasource and then bind to the control.    Otherwise, you're going to have to put all that text into an array or datatable or something else, and then sort that.HTH, Peter BrunoneMS MVP, ASP.NETFounder, EasyListBox.comDo the impossible, and go home early....

Help With Link button or Hyperlink button
I have a hyperlink button in my webpage, where email address is automatically retrive from a Seller table. so hyperlink.Text = datarow.Item(1) Now what I want is that when I click on this email address, it should open Outlook express or any other mail client Any Tips will be appreciated Thanks in advance Hi, the trick is indeed in the text property. Make it so that it has this value: < a href="mailto:test@testmail.com">thenameofthepersontomail< /a > Here test@testmail.com can be something that's retrieved from a database. I would check the Navigat...

Link for a link button
Hey Guys I have a link button and i need to pass a url to it. how do it do it. hyperlink has navigate url but how to do it for link button. Thanks in advance cheers There is no property available to set the url to a link button. you can use the OnClick event of the linkbutton to do the action       void LinkButton1_Click(Object sender, EventArgs e)       {         // do some action here      }    <form runat="server">      &l...

Link Button or Button
The navigation on my web site uses buttons instead of link buttons because I can better customize the look that I want with buttons over link buttons. If I go to my search page which consists of a textbox, validation control, and search button, I can not navigate to another page(using the buttons) until I fulfill the validation control by entering a value in the text box. Any way I can get around this? The navigation buttons use a simple response.redirect line of code. Thanks. You've just encountered the main problem with client-side validation controls. What's happening is that your va...

How do you link a JavaScript function to the link button column?
I have a column in a datagrid with a link button that performs a database update. When the user clicks this link, I want to prompt them to make sure this is what they really want to do with a basic JavaScript confirm function. How do you link a JavaScript function to the link button column? Thanks. you can add OnClientClick = "javascript: return confirm ( 'Are You Sure ?' );" to the attribute of the LinkButton, for example: <ItemTemplate>                     <asp:LinkButton ID="LinkBut...

Change Link or LInk Button Color , On Mouse Over ?????
hello please tell me in asp.net how i can change the color when my mouse toches on any Link. means i want to change the link color on mouse over event.. or please tell me how i can do that..... put this in the HEADER portion of your HTML:<style>A:hover {color:orange}</style> Or put the a:hover information in a .css file (A:hover {color:orange}.. you won't need the style tags), say SomeStyle.css, then include it in your header if you want to have the same effect in multiple pages: <HEAD> <title>Some Title</title> ...

Link Button Event not Getting Fired when the button is clicked
Hi In the Inline code , i have any tables within a form. when i try to click the link button, the button event is not getting fired. Can any on slove this for me. Thanking you Solomon Hello, we would really want to help you, but we need to know more information, can u post some code please. regards.Bilal Hadiar, MCP, MCTS, MCPD, MCTMicrosoft MVP - Telerik MVP i think the handles part is not there for the for that event. Search for handles linkbutton1.click in codebehind. if not found add it....

display a new popup window beside a link button when a link button is clicked
I have a link button in a page, When i click on the link button I need to get the data ffrom the server side and display the list of those values(100,101,102....) in a new popup window. and i need to display that window next to the link button which i clicked. I am not good at the client side coding. can some one please help me on this. I need to finish it by tomorrow. I have taken a list of values in a string builder Thank you so much in advance                         &nbs...

Link Link Link
geiler Link: http://tagestipps.info/fclick/fclick.php?12 ...

Confirmation message for delete link button conflict with edit's cancel link button
Hello, I have used the tutorial of ASP.net's confirmation message for the delete link button of the gridview, but it conflict with the edit's cancel link button. Would somebody teach me how to fix it? Thanks. protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs  e)    {               if (e.Row.RowType == DataControlRowType.DataRow)        {             // reference the Delete LinkButton&...

Link Link Link
geiler Link: http://tagestipps.info/fclick/fclick.php?12 ...

Link Link Link
geiler Link: http://tagestipps.info/fclick/fclick.php?12 ...

Web resources about - Help with javascript/link button/changing link button text - asp.net.getting-started

JavaScript Kit- Your comprehensive JavaScript, DHTML, CSS, and Ajax stop
Your comprehensive JavaScript, DHTML, CSS, and Ajax stop

Let's Code: Test-Driven Javascript by James Shore — Kickstarter
James Shore is raising funds for Let's Code: Test-Driven Javascript on Kickstarter! A screencast series focusing on rigorous, professional Javascript ...

Eloquent JavaScript: A Modern Introduction to Programming
... and pragmatics. I loved the tutorial-style game-like program development. This book rekindled my earliest joys of programming. Plus, JavaScript! ...

JavaScript - Wikipedia, the free encyclopedia
programming styles. JavaScript was formalized in the ECMAScript language standard and is primarily used in the form of client-side JavaScript ...

Open Directory - Computers: Programming: Languages: JavaScript: Tools: Obfuscators
... editor - report abuse/spam - help the entire directory only in Tools/Obfuscators Description Top : Computers : Programming : Languages : JavaScript ...

Facebook Open-Sources JavaScript Static-Type Checker Flow
The latest software to be open-sourced by Facebook is Flow , a static-type checker for JavaScript . (more…) New Career Opportunities Daily: ...

Under the Hood: The JavaScript SDK - The use of polyfills - Facebook
Facebook Engineering hat eine Notiz mit dem Titel Under the Hood: The JavaScript SDK - The use of polyfills geschrieben. Du kannst den vollständigen ...

JavaScript
The Facebook SDK for JavaScript provides a rich set of client-side functionality for adding Social Plugins, making API calls and implementing ...

Facebook App Devs Get Javascript
It has been an oft-lamented fact of the Facebook Platform thus far in its life that, in order to use all but the most simple of Javascript functionality–the ...

Badass JavaScript (@badass_js) on Twitter
WebGLWorker is an open source library that allows using WebGL from Web Workers. Great work as always from @kripken . blog.mozilla.org/research/2014/… ...

Resources last updated: 12/19/2015 1:00:09 PM