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

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 3

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

here's a more elegant solution

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

read the entire post at www . aspsnippets.com/post/2009/05/21/Disable-Enter-key-in-TextBox-to-avoid-postback-in-ASPNet.aspx

Answer 6

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!