TextBox causes Button Postback in ASP.NET

Question

ASP.NET 2.0, testing in FF3 and IE7.

When I hit the 'enter' button from a text box the corresponding "OnClick" event for the first ImageButton in the page is fired. If I remove that image button, it fires the next ImageButton OnClick event on the page.

From the FireBug console, if I use JavaScript to submit the Form, this does not happen. But for whatever reason hitting enter from the textbox triggers the unrelated ImageButton event.

I found this question which had a similar problem, however the proposed answer to that solution doesn't work since ImageButtons do not have a "UseSubmitBehavior" property on them.

I don't understand why this event is firing. If I look at Request.Form, I can see that __EVENTTARGET is empty, and it is in fact posting the entire form contents (all of my textboxes), but also includes imageButton.x and imageButton.y key/value pairs.

Why is this? I suppose I could detect "enter" key presses from these text boxes with javascript, but my experience in the past is this behavior is highly variable between browsers. Any suggestions?

Answer 1

You could try setting a default button in an asp panel or on your form. This will let you control what happens when a user hits the enter key.

Answer 2

here's a more elegant solution

<asp:TextBox ID="TextBox1" runat="server" onkeydown = "return (event.keyCode!=13);" > </asp:TextBox>

read the entire post here

Answer 3

I'm having the same issue on my project.

This issue is caused because ASP.NET always will assume that the first element that inherits from IButton interface (Button and ImageButton) is the default button from the page.

Hipoteticaly, if you use an LinkButton instead of Button or ImageButton, this issue is solved.

You can find more information here on MSDN.

Answer 4

You can disable the Enter key from being pressed, so the user will have to click on of your ImageButtons. Just paste this javascript block onto your page:

<script type="text/javascript">
function stopRKey(evt) { 
  var evt = (evt) ? evt : ((event) ? event : null); 
  var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null); 
  if ((evt.keyCode == 13) && (node.type=="text"))  {return false;} 
}
document.onkeypress = stopRKey;
</script>

Answer 5

Recently, I've been doing more on the client with web services and fewer postbacks. By moving my controls outside of the form element (or eliminating it altogether), the problem goes away. It's inserted by default on aspx pages, but it didn't occur to me until recently that I don't need it for much of what I do.

Answer 6

Its the default behaviour for an enter button press in a non text area to post back a form. You would have to handle it in a javascript method to stop the postback.

You'd just need to check the window.event.keyCode property to see if its equal to 13. If it is, reset it to 0.

function KeyPress()
  {
     if (window.event.keyCode == 13)
        {
           window.event.keyCode = 0;
        }
  }

Answer 7

I suppose I could detect "enter" key presses from these text boxes with javascript

That's what I did to get around that behaviour and it works great in IE7 and FF3. It's just a little unnatural.

Here is a generic exemple:

    function TextBox1_KeyDown(sender, e)
    {
    var key;
        if(window.event)
            key = window.event.keyCode; //IE
        else
            key = e.which; //firefox
        if(key == 13 && $("#TextBox1").val() != "")
        {
            WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("TextBox1", "", true, "", "", false, true));
        }
        return (key != 13);
    }

I used WebForm_DoPostBackWithOptions because I needed validators to trigger. Otherwise, you might want to use __DoPostBack.

Here are the "prototypes":

function __doPostBack(eventTarget, eventArgument)

function WebForm_PostBackOptions(eventTarget, eventArgument, validation, validationGroup, actionUrl, trackFocus, clientSubmit)
{
    this.eventTarget = eventTarget;
    this.eventArgument = eventArgument;
    this.validation = validation;
    this.validationGroup = validationGroup;
    this.actionUrl = actionUrl;
    this.trackFocus = trackFocus;
    this.clientSubmit = clientSubmit;
}

function WebForm_DoPostBackWithOptions(options)

Hope it helps.

P.S.: I used JQuery here but $get would be the same.

Answer 8

Here's an elegant solution I have found, in case anybody else has this problem (in case all other solution don't work for you, as they didn't work for me):

<asp:UpdatePanel runat="server">
<ContentTemplate>
    <asp:Panel runat="server" DefaultButton="doNothingButton">
        <ul id="shopping-list-ul">
        </ul>
        <asp:Button CssClass="invisible" runat="server" ID="doNothingButton" OnClientClick="return false;" />
    </asp:Panel>
</ContentTemplate>

The textbox iself was inside the ul (generated by javascript).
Pressing enter will trigger the "doNothingButton", which will return false on client side, causing no postback at all!