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?

13.10.2009 16:31:27
I check UseSubmitBehaviour property of button but it seems like it doesn't solve your problem (for button), does it ?
Canavar 28.11.2009 18:41:26
Be careful of the spelling. I noticed you're using the British/Canadian spelling of "behavior". Of course, IntelliSense will catch that. :)
Andy West 29.11.2009 03:42:05
@Canavar, yes it does. I am looking for a similar feature in ImageButton.
Manish Basantani 30.11.2009 08:26:38
@Andy: sorry, i meant 'UseSubmitBehavior'.
Manish Basantani 30.11.2009 08:27:32
@Amby: No need to apologize. Just wanted to make sure it doesn't cause you any problems.
Andy West 1.12.2009 04:18:13
8 ОТВЕТОВ
РЕШЕНИЕ

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>
11
2.12.2009 16:28:58
i tried this approach. asp:imagebutton doesn;t seems to handle onKeyPress event on client side. Code: <asp:ImageButton ID="btnExcelExport" runat="server" OnClick="btnExcelExport_Click" Visible="false" ImageUrl="~/common/images/excel.gif" onkeypress="javascript:alert('pressed')" />
Manish Basantani 30.11.2009 08:02:16
Implementing the OnKeyPress as you have does the SERVER side event. You need to wire it up with javascript. I will edit my answer to show it correctly.
Kelsey 30.11.2009 16:39:36
Putting that disableEnterKey function in the onkeydown event of the body tag would mean the user would be unable to add carriage returns to a multi-line textbox. Also this is a little funny: if (key == 13) return false; else return true;
Ben Lesh 1.12.2009 20:25:36
Yes that is why I noted the other methods. If there are no multi-line text box it would be valid. If not I have provided other alternatives. I don't know the users exact scenario so I tried to provide more than one answer.
Kelsey 1.12.2009 22:47:29
In my case I actually WANT to use the enter key for something else. This feels like using a bazooka to kill a fly, and blowing a hole in my wall in the process.
nuzzolilo 29.11.2015 02:31:03

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');
1
29.11.2009 04:10:07

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)

2
2.12.2009 15:51:40
Btw thanks for copying my answer a day late and then down voting my answer. Down vote was at the exact time you posted your answer... maybe just a coincidence.
Kelsey 1.12.2009 22:53:40
Sorry, I never read your entire post. I saw the "if(true)return true; else return false;" bit and the fact you had them assigning onkeydown from the code behind and figured the rest of the answer wasn't worth reading. Now that I've read your post, my post is similar, but there are some basic differences between the two methods. For example: I'm suggesting they add the onkeydown in the markup. I'm using a css class to find the inputs I want to kill with jQuery. I also would never recommend disabling the enter key everywhere inside a form, as that would mess up textarea behavior.
Ben Lesh 2.12.2009 15:39:38
There, all better. I'll take an F on the test, since I clearly copied one of the most complicated and unique algorithms SO has ever seen.
Ben Lesh 2.12.2009 15:52:33
I have no problem with people posting similar answers (it's quite common). It's when they do it and down vote other correct answer(s) then I see it as abuse.
Kelsey 2.12.2009 16:25:53

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.

2
1.12.2009 20:34:48

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

7
1.12.2009 20:51:51
Thats a good idea. But wont't work in my case,since my image button is part of another user control. So i can't force the parent controls to set the DefaultButton.
Manish Basantani 2.12.2009 07:02:33
Excellent. Even work if the Image button is before (outside) the panel.
Jaider 5.08.2014 21:40:37

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>
1
4.12.2009 06:46:57

See the following link.This can be solved for all default button submit problem. http://weblog.kevinattard.com/2011/08/aspnet-disable-submit-form-on-enter-key.html

1
26.10.2012 08:44:02

Please Use This Code

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