How to disable submit behaviour of asp:ImageButton?

Question

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 \"UseSu

Answer 1

Please Use This Code

<script type="text/javascript" language="javascript">
$(document).ready(function {
    $("#<%=imageClicked.ClientID%>").prop('disabled',true)
});
</script>

Answer 2

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.

Answer 3

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

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

1. 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;

2. 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.

3. 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.

4. 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.

5. 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)

Answer 4

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');

Answer 5

you want something like

<form ...>

  <!-- some code here -->

  <button style='display:none' onclick='return false'>here comes the magic</button>

  <button>normal button </button>

</form>

Answer 6

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