why my webpage is refreshing when i am calling a JavaScript function in my aspx page on a html image click event?

Question

i am using a html image control in mt aspx page and i am calling a javascript function on the click event of that control but here my page is getting refreshed every time i am clicking it

here's my code:

<input id="wbsnew1" type="image" value="New" onclick="showHideDiv()" src="images/New.png" />

and here's my javascript code :

function showHideDiv() {
        document.getElementById("newdata2").style.display = "block";
    } 

"newdata2" is a div

Answer 1

<input id="wbsnew1" type="image" value="New" onclick="return showHideDiv();" src="images/New.png" />

function showHideDiv() {
    document.getElementById("newdata2").style.display = "block";
    return false;
 } 

Answer 2

Try to return after applying the function like the following code :

`<input id="wbsnew1" type="image" value="New" onclick="showHideDiv(); return false;" src="images/New.png" />`  

also let your function return false

function showHideDiv() {  
     document.getElementById("newdata2").style.display = "block";

return false;
}

Answer 3

I suppose that the input tag is located inside some other html element that triggers reloading. Try stopping bubbling:

<input id="wbsnew1" type="image" value="New" onclick="showHideDiv(event)" src="images/New.png" />

function showHideDiv(event) {
        event.stopPropagation();
        document.getElementById("newdata2").style.display = "block";
    } 

Answer 4

<input type="image" /> elements are used to submit the form (in ASP.NET that equals the postback).

You have few alternatives:

1. (best) Replace the <input> tag to <img /> . The other attributes are the same (except the type attribute is not needed).
2. Add return false to the onclick handler: <input onclick="showHideDiv(); return false;" .

3. Return the false value from the method itself and add return keywork to the method

   <input onclick="return showHideDiv();" /> function showHideDiv() { .... return false; }