Prevent page postback on enter key press in textbox in asp-net web page

In an asp.net web page, you may have experienced that pressing enter key postbacks the page. For example, take the following scenario:

<table>

            <tr>

                <td>Name</td>

                <td><asp:TextBox ID="txtName" runat="server"></asp:TextBox></td>

            </tr>

            <tr>

                <td>Email</td>

                <td><asp:TextBox ID="txtEmail" runat="server"></asp:TextBox></td>

            </tr>

            <tr>

                <td colspan="2">

                    <asp:Button ID="btnOK" runat="server" Text="OK" />

                </td>

            </tr>

        </table>

In the page, if you press enter key in any of the textboxes, the page will postback, which is not desired.

1.0 What’s the reason?
Lets look at the html markup generated for the page:

The asp.net button control has been rendered with “submit” type, which is the reason of page postback when enter key is pressed in any of the textboxes. Note the following line in the image above:

<input id="btnOK" type="submit" value="OK" name="btnOK"/>

2.0 The Way Out
We can use two different approaches to prevent postback on enter key-press in any of the textboxes:

1. Using UseSubmitBehavior="false" in the asp.net button control’s markup
We can set UseSubmitBehavior="false" in the button markup:

<table>

            <tr>

                <td>Name</td>

                <td><asp:TextBox ID="txtName" runat="server"></asp:TextBox></td>

            </tr>

            <tr>

                <td>Email</td>

                <td><asp:TextBox ID="txtEmail" runat="server"></asp:TextBox></td>

            </tr>

            <tr>

                <td colspan="2">

                    <asp:Button ID="btnOK" runat="server" Text="OK" UseSubmitBehavior="false" />

                </td>

            </tr>

        </table>

This stops rendering the button as type=”submit”. Now the rendered markup for the button will be:

Not the following line in the image above as captured from firebug:

<input id="btnOK" type="button" onclick="javascript:__doPostBack('btnOK','')" value="OK" name="btnOK"/>

This shows that there is no more type="submit" attribute, rather onclick="javascript:__doPostBack('btnOK','') has been added.

So you have successfully stopped the page postback now!

2. Prevent enter key press in all the textboxes
One another way to stop the page postback is to prevent enter key press in any of the textboxes. We can use jquery to easily perform the task. This way:

<script type="text/javascript">

        $(function(){

            $(':text').bind('keydown',function(e){ //on keydown for all textboxes

                if(e.keyCode==13) //if this is enter key

                    e.preventDefault();                

            });

        });

    </script>

On page load, all the textboxes in the form are bound to the keydown event to a function. In the function we check if the key pressed in the ‘enter key’. If so, we prevent the further bubbling of the event. Hence it prevents the page postback.

Note: You will need to reference the latest jquery file in the page to use the second technique.

3.0 Conclusion
We looked at two ways to prevent page postback on enter-key press in a textbox in asp.net web page. Both the techniques work well. But I would prefer the first one since this would save the extra client side manipulations in the user’s machine.

4.0 Looking towards hearing from you!
You are warmly welcome to share your experiences. You can start discussion by adding comments from the form below. You can help spreading out the words by bookmarking this article to any of your favourite bookmarking site!

Happy Programming!