How to disable submit behaviour of asp:ImageButton?

I have a image button in a page which can be triggered on mouse click, by default it gets triggered on enter press also which i want to disable.

I know about "UseSubmitBehaviour" attribute in asp:Button, is there a way to do the same in asp:ImageButton?

Solution 1:

I will assume you have some sort of input controls and you don't want an enter keypress to auto submit when a user accident hits the enter key. If so you can attach a javascript onkeypress event to each control that you want to disable this behavior for.

function disableEnterKey(e)
{
     var key;
     if (window.event) key = window.event.keyCode; // Internet Explorer
     else key = e.which;

     return (key != 13);
}

// In your aspx file Page_Load do the following foreach control you want to disable
// the enter key for:
txtYourTextBox.Attributes.Add("OnKeyPress", "return disableEnterKey(event);");

If you need to disable the Enter key submitting form completely. case use the OnKeyDown handler on <body> tag on your page.

The javascript code:

if (window.event.keyCode == 13) 
{
    event.returnValue = false; 
    event.cancel = true;
}

With JQuery this would be much cleaner, easier and the recommended method. You could make an extension with:

jQuery.fn.DisableEnterKey =
    function()
    {
        return this.each(function()
        {
            $(this).keydown(function(e)
            {
                var key = e.charCode || e.keyCode || 0;
                // return false for the enter key
                return (key != 13);
            })
        })
    };

// You can then wire it up by just adding this code for each control:
<script type="text/javascript" language="javascript">
    $('#txtYourTextBox').DisableEnterKey();
</script>

Solution 2:

If you put your content in a asp:Panel you can use the DefaultButton Property to set a different button as the default so your image button wont be clicked.

<asp:Panel runat="server" ID="pnl_Test" DefaultButton="btn_Test2">
    <asp:ImageButton runat="server" ID="btn_Test1" />
    <asp:Button runat="server" ID="btn_Test2" />
</asp:Panel>

In this example the btn_Test2 will be clicked when you hit enter where normally btn_Test1 would be clicked

Solution 3:

The form will execute the first button it finds on the page when you hit enter. If you can move the ImageButton further down the page so it's no longer the first button in the markup, and use CSS to position it properly, this should fix your issue. I fixed the same exact thing last week and this worked for me. I went with this solution because it didn't require JavaScript to work properly.

Solution 4:

Use Kelsey's Answer (This answer is wiki'ed)

...but please note a few things when you implement it.

I'd recommend the plain old javascript method if you're not already using jQuery. if you do that method, just return (keynum != 13) don't do something silly like if(true) return true; else return false;
You don't have to assign onkeydown from the code behind. That can be done in the markup and it's a lot cleaner when you do.
Don't disable the enter key in your entire form. You can do it in your inputs only, but if you do it in the entire form you won't be able to add a carriage return in a textarea.
If you do use jQuery, I'd recommend adding a CSS class called "disableEnterKey" and assigning it to your form elements you want to disable, then calling Kelsey's jQuery method on $(".disableEnterKey") in the document ready.
Don't answer too similar to anyone on SO, even if you don't fully agree with the answer. And even if the answer was simple and thousands of people probably have done the samething. It's "copying". Which is similar to being a "cutter" or a "tattle tale"... which is bad.

(this answer has been community wiki'ed as this question thread has gotten silly)

Solution 5:

Use an asp:image instead. Then place some javascript code in the onclick "javascript:document.getElementById('imageClicked').setAttribute('value', 'true'); document.myform.submit();"

Set a hidden field's value (using javascript) to tell the server side code that the image was clicked.

document.getElementById('imageClicked').setAttribute('value', 'true');

Then, at the end of handling the postback on the server reset the hiddenField's value:

document.getElementById('imageClicked').setAttribute('value', 'true');