Simulating a button click at onkeyup

Question

I have two TextBoxes with corresponding two Buttons. I want that when a TextBox has the focus and the user hits Enter then the corresponding Button's code behind event handler is executed as if it was clicked. This is a sample code:

Aspx:

<asp:TextBox ID="TextBox1" runat="server" onkeyup="myfunction1(event)"></asp:TextBox>
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button 1" usesubmitbehavior="false" />

<asp:TextBox ID="TextBox2" runat="server" onkeyup="myfunction2(event)"></asp:TextBox>
<asp:Button ID="Button2" runat="server" onclick="Button2_Click" Text="Button 2" usesubmitbehavior="false" />

<asp:Label ID="Label1" runat="server"></asp:Label>

<script type="text/javascript">
    function myfunction1(e) {
        if (e.keyCode == 13)
            document.getElementById('<%= Button1.ClientID %>').click();
    }
    function myfunction2(e) {
        if (e.keyCode == 13)
            document.getElementById('<%= Button2.ClientID %>').click();
    }
</script>

Code Behind:

protected void Button1_Click(object sender, EventArgs e)
{
    Label1.Text = "Button 1 was clicked";
}

protected void Button2_Click(object sender, EventArgs e)
{
    Label1.Text = "Button 2 was clicked";
}

But when I press Enter in any of the TextBoxes it always executes the Button1 code behind event handler. If I click on the buttons it obviously works as expected.

What am I missing?

What about keys other than Enter? Enter will submit the form, and asp:buttons render as ``. Since `Textbox1` is first, it's getting the submit event. — bhamlin, Jul 13 '12 at 23:28
@bhamlin So the solution would be to not use asp:buttons and in instead use html buttons? Post it and if it is the best solution I will accept. — Clodoaldo Neto, Jul 13 '12 at 23:35
Why you just use the TextBox event onChange? no? http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.textbox.textchanged.aspx — GTSouza, Jul 13 '12 at 23:38

score 2 · Answer 1 · edited May 23 '17 at 10:34

an ASP button renders as a submit button by default. The default action for Enter keypress (happens after keydown, before keyup) when a form element is in focus is to submit the form. If an HTML form contains multiple submit buttons, the first one is the default submit button.

Putting all this together, when you keypress (remember, happens after keydown, before keyup) with the Enter key, the form is submitted via the default submit button (Button1).

You have many options to fix the problem. I would recommend using an input type="button" instead of an ASP button with runat=server and handle the click events from there.

Related: Asp button with different button type

score 0 · Answer 2 · answered Jul 14 '12 at 00:53

You can achieve your requirement by putting the set in a panel control and setting DefaultButton property of the panel

Example:

<asp:Panel ID="Panel1" runat="server" DefaultButton="Button1" Height="72px">

   <asp:TextBox ID="TextBox1" runat="server" onkeyup="myfunction1()"></asp:TextBox>
   <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button 1" />

   <asp:TextBox ID="TextBox2" runat="server" onkeyup="myfunction2()"></asp:TextBox>
   <asp:Button ID="Button2" runat="server" onclick="Button2_Click" Text="Button 2" />

</asp:Panel>

score 0 · Accepted Answer · edited May 23 '17 at 11:55

0

Setting the Button's UseSubmitBehavior to false is the simplest solution. From this answer in the link by @jbabey.

edited May 23 '17 at 11:55

Community

1
1

answered Jul 16 '12 at 17:29

Clodoaldo Neto

118,695
26
233
260

Simulating a button click at onkeyup

3 Answers3