avoid page load on html image button click

Question

I have code on aspx page :

<input id="imgBtnUpdate" type="image" src="../images/update_btn.gif" value="Update" onclick="javascript:showModalPopupUpdate();"/>

also Script is :

var popUpObj11;
    function showModalPopupUpdate() {

        popUpObj11 = window.open("AddPopup.aspx?mode=Update",
        "ModalPopUp",
        "toolbar=no," +
        "scrollbars=no," +
        "location=no," +
        "statusbar=no," +
        "menubar=no," +
        "resizable=no," +
        "width=450," +
        "height=190," +
        "left = 490," +
        "top=300"
        );
        popUpObj11.focus();
    }

Ok? When i clicking the imgBtnUpdate Button. it showing me popup which is fine. but why it reloading the parent page on which the button consisting ? please guide me... tell me solution.

Answer 1

INPUT type=image Element

Creates an image control that, when clicked, causes the form to be immediately submitted.

Try giving

return false;

at the end of the function.

Better use an anchor tag and embedded image for doing this instead of <input type="image" />

Answer 2

Return false from the event to keep the button from posting the page:

onclick="showModalPopupUpdate();return false;"

Note: The javascript: protocol is only used when you put script in an URL. If you use it in an event it's interpreted as a label instead.

Answer 3

Change your code as follows:

<input id="imgBtnUpdate" type="image" src="../images/update_btn.gif" value="Update" onclick="showModalPopupUpdate();return false;"/>

If the onclick event returns a false value, the browser will not execute the default action.