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, May 31 '12 at 07:24

score 2 · Accepted Answer · edited May 23 '17 at 12:08

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 '17 at 12:08

Community

1
1

answered May 31 '12 at 07:26

Aristos

66,005
16
114
150

onclick is a server side event, can we put javascript inside this? It is throwing an exception – Charu May 31 '12 at 08:49
1

@Charu My apologies, I mix up with the asp:image, this is asp:imagebutton. – Aristos May 31 '12 at 08:55
1

@Charu Just return false to avoid the post back, and its work (just checked) – Aristos May 31 '12 at 08:59
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 – Charu May 31 '12 at 09:09
@Charu Is because you have a bug, you must type ==, on the if. – Aristos May 31 '12 at 09:10
It is not working for first click also after using == in If block if(cnt.src=='plus.gif') – Charu May 31 '12 at 09:13
@Charu is because you probably use the full directory of the image... (and not just the plus.gif). Place an alert to see whats on the src – Aristos May 31 '12 at 09:14
Which directory? I have images in root folder parallel to this page – Charu May 31 '12 at 09:16
@Aristos what if I want to get Url from another control? – Jamshaid K. Aug 03 '16 at 12:45
@جمشیدکامران Use javascript to get it and use it - This is usually easy especial if you use jQuery this days – Aristos Aug 03 '16 at 22:32
@Aristos I am using javascript, i need to get the current clicked control id and then swap it's value with another server control. issue is i am not able to get the server control – Jamshaid K. Aug 04 '16 at 06:27

score 0 · Answer 2 · answered May 31 '12 at 07:28

0

The following should work

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

answered May 31 '12 at 07:28

MiGnH

428
4
11

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 – MiGnH May 31 '12 at 07:30

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

2 Answers2

update