Want to change image src of ImageButton using javascript on client click

Question

I tried this first which is not working:

<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="minus.gif" OnClientClick="this.src='plus.gif';"/>

Another method:

<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="minus.gif" OnClientClick=" return changeImg(this)"/>    

 function changeImg(cnt)
    {
    if(cnt.src='minus.gif')
    {
    cnt.src='plus.gif';
    }
    else
    {
    if(cnt.src='plus.gif')
    {
    cnt.src='minus.gif';
    }
    }
    return false;
    }
    </script>

Is it even executing the JavaScript? Quickly test by putting alert('hi'); inside the function. It might be running the JavaScript then reloading the page.... — Greg
– Greg, Commented May 31, 2012 at 7:24

Community · Accepted Answer · 2017-05-23 12:08:05Z

2

The issue here is that you do not return false, on client click and you trigger the onlick on code behind. Just return false; to avoid the post back and you get what you try.

<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="minus.gif" OnClientClick="this.src='plus.gif';return false;"/>

update

On your code you type if(cnt.src='plus.gif'), but you must type == , not =

To avoid this type of error is better to place first the const, eg type

if('plus.gif' == cnt.src)

and the final code

function changeImg(cnt)
    {
      if(endsWith(cnt.src, 'minus.gif'))
      {
        cnt.src='plus.gif';
      }
      else if(endsWith(cnt.src, 'plus.gif'))
      {
         cnt.src='minus.gif';
      }          
      // to avoid post back return false
      return false;
    }

function endsWith(str, suffix) {
   return str.indexOf(suffix, str.length - suffix.length) !== -1;
}

relative : endsWith in JavaScript

edited May 23, 2017 at 12:08

CommunityBot

11 silver badge

answered May 31, 2012 at 7:26

Aristos

66.7k16 gold badges117 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Charu Over a year ago

onclick is a server side event, can we put javascript inside this? It is throwing an exception

Aristos Over a year ago

@Charu My apologies, I mix up with the asp:image, this is asp:imagebutton.

Aristos Over a year ago

@Charu Just return false to avoid the post back, and its work (just checked)

Charu Over a year ago

Hey this works, but i want to change the image again on another click.It is not changing. i have updated the entire code, it is working for first click only

Aristos Over a year ago

@Charu Is because you have a bug, you must type ==, on the if.

|

MiGnH · Accepted Answer · 2012-05-31 07:28:12Z

0

The following should work

<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="minus.gif"  onClick="function(){this.setAttribute("src", 'plus.gif');}"/>

answered May 31, 2012 at 7:28

MiGnH

4384 silver badges11 bronze badges

1 Comment

MiGnH Over a year ago

I guess I don't know enough about asp, I would think this would result in an HTML onCLick event, guess the downvote shows otherwise

Collectives™ on Stack Overflow

Want to change image src of ImageButton using javascript on client click

2 Answers 2

update

11 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

update

11 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related