How to set the default button for a TextBox in ASP.Net?

Question

I have a page that has two buttons, btnSearch and btnAddUser. The aspx page is as below. As you can see the default button is btnAddUser. But I would like to set the default button to btnSearch when I type something in the text box txtFilter. I added a JavaScript function clickButton, and in the page_load I added following code. The problem is when I press enter after I type something in the text box, both btnSearch and btnAddUser are clicked. Is there any way I could do so that btnAddUser is not clicked.

 txtFilter.Attributes.Add("onkeypress", "return clickButton(event, '" + btnSearch.ClientID + "')");

<asp:Panel ID="MainPanel" runat="server" DefaultButton="btnAddUser">
    <table align="center" width="900">
        <tr>
            <td align="left" width="70%">
                <asp:TextBox ID="txtFilter" runat="server" Width="200"></asp:TextBox>
                <asp:Button ID="btnSearch" runat="server" Text="Search" 
                    onclick="btnSearch_Click" CausesValidation="false" />
            </td>
            <td align="right" width="30%">
                <asp:Button ID="btnAddUser" runat="server" Text="Add User" Width="85px" 
                    CausesValidation="False" onclick="btnAddUser_Click" />
            </td>
        </tr>
        <tr>
...
</asp:Panel>

function clickButton(e, buttonid) {
            var evt = e ? e : window.event;
            var bt = document.getElementById(buttonid);
            if (bt) {
                if (evt.keyCode == 13) {
                    bt.click();
                    return false;
                }
            }
        }

UPDATE: After googling, i found a solution as below. It seems working. But it is not working on Firefox? Anyone know how to resolve it?

function clickButton(e, buttonid) {
            var evt = e ? e : window.event;
            var keycode = evt.keyCode || evt.which || evt.charCode;
            var bt = document.getElementById(buttonid);
            if (bt) {
                if (keycode == 13) {
                    evt.cancelBubble = true;
                    evt.returnValue = false;
                    if (evt.stopPropagation) {
                        evt.stopPropagation();
                        evt.preventDefault();
                    }
                    bt.click();
                    return false;
                }
            }
        }

This link might help you out: http://www.codeproject.com/Articles/35180/How-To-set-Default-Button-for-ENTER-key-pressed-ev — Krishna, Apr 03 '12 at 18:20
You may want to look into jQuery's `keypress` event. It tends to be much more reliable. http://api.jquery.com/keypress/ — SouthShoreAK, Apr 03 '12 at 19:23
For firefox, your standard CTRL / ALT / SHIFT are found in e.originalEvent. Such as, e.originalEvent.shiftKey (You can see the others using firebug) — clamchoda, Apr 12 '12 at 18:18

score 13 · Answer 1 · answered Apr 04 '12 at 09:26

13

You don't need javascript just wrap search text box in another panel and set default button, something like this (i stripped table tags) :

  <asp:Panel ID="MainPanel" runat="server" DefaultButton="btnAddUser">
    <asp:Panel ID="searchPanel" runat="server" DefaultButton="btnSearch">
      <asp:TextBox ID="txtFilter" runat="server" Width="200"></asp:TextBox>
      <asp:Button ID="btnSearch" runat="server" Text="Search" 
        CausesValidation="false" onclick="btnSearch_Click" />
    </asp:Panel>
    <asp:Button ID="btnAddUser" runat="server" Text="Add User" Width="85px" CausesValidation="False" onclick="btnAddUser_Click" />
  </asp:Panel>

answered Apr 04 '12 at 09:26

Antonio Bakula

20,445
6
75
102

I tried, but both buttons get clicked when press enter in the textbox. – GLP Apr 04 '12 at 13:25
you press enter in txtFilter textbox ? I tested in IE, Firefox, Chrome and only search button is clicked. Could you please make small project with just this markup and test it. – Antonio Bakula Apr 04 '12 at 13:36
Just tried. Somehow, the btnSearch worked. But when I press enter anywhere else except the textbox, the btnAddUser was not clicked. – GLP Apr 04 '12 at 13:54
Where is that other control that has the focus when you press enter ? – Antonio Bakula Apr 04 '12 at 13:56
I only have one text box, a grid view and couple of buttons in my page. – GLP Apr 04 '12 at 14:21
are they inside mainpanel ? I tried to put TextBox above btnAddUser and it works OK – Antonio Bakula Apr 04 '12 at 14:25
That is probably the problem. I don't have another text box that could gain focus. – GLP Apr 04 '12 at 14:35
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/9688/discussion-between-antonio-bakula-and-gaolai-peng) – Antonio Bakula Apr 04 '12 at 14:54
So does it work, or not? Please comment what's wrong with this approach, or accept the answer. – Al Kepp Jan 28 '13 at 16:11

score 0 · Answer 2 · answered May 25 '20 at 15:08

Wrap the TextBox in a Panel, and set the DefaultButton property.

<asp:Panel runat="server" DefaultButton="btnSearch">
    <asp:TextBox ID="txtFilter" runat="server" Width="200" />
    <asp:Button ID="btnSearch" runat="server" Text="Search" 
        onclick="btnSearch_Click" CausesValidation="false" />
</asp:Panel>

score -1 · Answer 3 · answered Apr 03 '12 at 18:40

-1

JavaScript

<script language="javascript" type="text/javascript">
    function kPress(evnt, ID) {
        var ButtonID = ID.id;
        var btnSearchID = ButtonID.replace('txtFilter', 'btnSearch');
        document.getElementById(btnSearchID).click();
    }
</script>

HTML

<asp:TextBox ID="txtFilter" runat="server" Width="200" onkeypress="kPress(event, this);"></asp:TextBox>

answered Apr 03 '12 at 18:40

Pankaj

9,749
32
139
283

I forgot to mention, i am using master/content page. But I tried your method, not working. – GLP Apr 03 '12 at 19:01
It will work for Content pages as well. Have you tried with setting debugger in your javascript ? – Pankaj Apr 03 '12 at 19:06
Yes. Everytime I try to type something, it will step into the javascript func, not even wait until i press enter. – GLP Apr 03 '12 at 20:26
I only want the search button gets click when i press enter in the text box. Otherwise the default button is btnAddUser. – GLP Apr 04 '12 at 15:10

How to set the default button for a TextBox in ASP.Net?

3 Answers3

JavaScript

HTML

Linked