One of the most annoying things in developing web pages is handling the "Enter key" for form submission. Enter key has been the favourite way users like to submit forms. Though we provide Buttons to click on,
the easiest and intuitive way is that, I can enter some text, make some changes and then hit "Enter" to accomplish my submission.
"Enter" Key is handled in a little tricky way by uplevel browsers like Internet Explorer, when it comes to ASP.NET.
If there is a single Textbox and single button, then it becomes straight forward, the button is submitted. However, the event code doesnt get executed, though the page postsback.
If there are two or more, buttons, then it takes up the first button as the default button. However, it still doesnt execute the event handler but just refreshes the page.
You can supress the Enter key event using Javascript. But this would result in other undesirable effects like, any Enter key in the form i.e. within Text Area or basically where large text is entered, would be
disabled.
The earlier work around was to associate a javascript function to each Button to verify the that the relevant button is submitted upon Enter key.
ASP.NET 2.0 introduces a wonderful work around for this. By simply specifying the "defaultbutton" property to the ID of the <asp:Button>, whose event you want to fire, your job is done.
The defaultbutton
property can be specified at the Form level in the form tag as well as at panel level in the <asp:panel> definition tag. The form level setting is overridden when specified at the panel level, for those controls that are inside the panel.
Also, the Event Handler for the specified button, fires thereby simulating a true submit button functionality.
The following sample code contains a form and 4 panels with each of them containing different buttons. It can be noticed that for each panel, there is a default button specified which would trigger the corresponding
button's event handler when "Enter" Key is pressed upon a text changed event.
Once we execute the above functionality, we can notice, the corresponding Buttons' text are displayed when the Enter key is pressed from within a panel and at the form level, it fires the
btn1 Button's event.
I can hardly see anything 'wonderful' about this. It is a fudge. There is a BUG, to use Microsoft's own words and instead of fixing it they give you the option of deciding which way the bug is going to work. Why should there be ANY action on pressing the ENTER
key outside the context of the control (textbox) without the programmer specifically including it? I do not want any action on Enter. Too many people, including myself, still use this key at the end of every entry in a textbox when, apart from trapping it
for validation purposes, it should merely send the user to the next field. Is this why so many data entry forms I use on the web include only one item on each of a multitude of pages?
The main aim of the defaultButton is to ensure Enter Key Submissions. Typically people are very much used to Enter Key submission and if we disable it might be annoying certain times.
The defaultButton really provides a way to handle Enter Keys for respective portions of the page when the focus is there.
> The main aim of the defaultButton is to ensure Enter Key Submissions. Typically people are very much used to Enter Key submission and if we disable it might be annoying certain times.
Sorry, but i don't think so. A form submitted with an enter key is on the contrary a problem you encounter any time you have a *single* textbox in a form, and it is a legacy behaviour you usually have to... disable. Now the Fwk has a defaultButton property,
but that outputs some javascript to handle key events and act accordingly, so this is something *more* than simply dealing with this legacy behaviour with enter keys. That is, i would at least combine them both: first, disable legacy behaviour, then eventually
add support for enter key submission...
As [hondav] is telling:
> There is a BUG, to use Microsoft's own words and instead of fixing it they give you the option of deciding which way the bug is going to work.
So, great to have a defaultButton and great you have posted a sample usage. Yet i believe this should be unrelated to the legacy behaviour we are talking about.
I have this same question. Even worse is I have an asp:login which iselt creates the button. So how can I set the ASP.Net 2.0 Login window to fire the button click on Enter? And it's in a asp:content
I have a page with two forms, one with just one textbox, and the other with many textboxes, dropdownlists, checkboxes, etc. This is a search page, with the results showing up in popups. The basic requirement is that if the user types in a value in the first
textbox and hits the ENTER key, the first form is submitted and a popup shows the results of the search. If the user fills in any fields in the second part of the form and hits ENTER on any textbox, the second form is submitted and the results are popped
up. The two popups are different, obviously.
I've been struggling with how to capture the ENTER key and send the user one or the other result popup. Then someone directed me to your article here. I inserted two panels enclosing the two different sets of controls into the panels. I set the defaultbutton
for the panels and tried it out. It works the first time I hit the ENTER key on any field. But if the user hits ENTER again, the first form is ALWAYS submitted. So, for example, if they didn't get the restuls they expected and went back to the main form
and added more criteria and hit ENTER, it would submit the first form, which is incorrect. The user has to refresh the page to get the second form to submit on ENTER (or click the submit button). This won't work for us. I'm wondering if this is a bug, and
if so is there a workaround? if not, what could I be missing to cause this behavior?
Thanks so much for your help - this webapp is nearly done, but this issue is causing me a lot of headaches! Hopefully this will be resolved soon.
ranganh
Star
12085 Points
2435 Posts
Microsoft
ASP.NET 2.0 - Enter Key - Default Submit Button
Apr 27, 2006 03:31 PM|LINK
Hi,
One of the most annoying things in developing web pages is handling the "Enter key" for form submission. Enter key has been the favourite way users like to submit forms. Though we provide Buttons to click on, the easiest and intuitive way is that, I can enter some text, make some changes and then hit "Enter" to accomplish my submission.
"Enter" Key is handled in a little tricky way by uplevel browsers like Internet Explorer, when it comes to ASP.NET.
You can supress the Enter key event using Javascript. But this would result in other undesirable effects like, any Enter key in the form i.e. within Text Area or basically where large text is entered, would be disabled.
The earlier work around was to associate a javascript function to each Button to verify the that the relevant button is submitted upon Enter key.
ASP.NET 2.0 introduces a wonderful work around for this. By simply specifying the "defaultbutton" property to the ID of the <asp:Button>, whose event you want to fire, your job is done.
The defaultbutton property can be specified at the Form level in the form tag as well as at panel level in the <asp:panel> definition tag. The form level setting is overridden when specified at the panel level, for those controls that are inside the panel.
Also, the Event Handler for the specified button, fires thereby simulating a true submit button functionality.
The following sample code contains a form and 4 panels with each of them containing different buttons. It can be noticed that for each panel, there is a default button specified which would trigger the corresponding button's event handler when "Enter" Key is pressed upon a text changed event.
<form id="form1" runat="server" defaultbutton="btn1">
<div>
<asp:TextBox ID="txt" runat="server"></asp:TextBox>
<asp:Button ID="Button5" runat="server" Text="Cancel" OnClick="Button5_Click" />
<asp:Button ID="btn1" runat="server" Text="Submit" OnClick="btn1_Click" />
<asp:Panel ID="pnl1" runat="server" defaultbutton="Button1">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button1" OnClick="Button1_Click" />
</asp:Panel>
<asp:Panel ID="Panel1" runat="server" defaultbutton="Button2">
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
<asp:Button ID="Button2" runat="server" Text="Button2" OnClick="Button2_Click" />
</asp:Panel>
<asp:Panel ID="Panel2" runat="server" defaultbutton="Button3">
<asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox6" runat="server"></asp:TextBox>
<asp:Button ID="Button3" runat="server" Text="Button3" OnClick="Button3_Click" />
</asp:Panel>
<asp:Panel ID="Panel3" runat="server" defaultbutton="Button4">
<asp:TextBox ID="TextBox7" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox8" runat="server"></asp:TextBox>
<asp:Button ID="Button4" runat="server" Text="Button4" OnClick="Button4_Click" />
</asp:Panel>
</div>
</form>
The corresponding, sample events for the button clicks are
protected void Button1_Click(object sender, EventArgs e)
{
Response.Write(Button1.Text);
}
protected void Button2_Click(object sender, EventArgs e)
{
Response.Write(Button2.Text);
}
protected void Button3_Click(object sender, EventArgs e)
{
Response.Write(Button3.Text);
}
protected void Button4_Click(object sender, EventArgs e)
{
Response.Write(Button4.Text);
}
protected void btn1_Click(object sender, EventArgs e)
{
Response.Write(btn1.Text);
}
protected void Button5_Click(object sender, EventArgs e)
{
Response.Write(Button5.Text);
}
Once we execute the above functionality, we can notice, the corresponding Buttons' text are displayed when the Enter key is pressed from within a panel and at the form level, it fires the btn1 Button's event.
Thanks.
Harish
http://geekswithblogs.net/ranganh
shuaiqy
Member
60 Points
12 Posts
Re: ASP.NET 2.0 - Enter Key - Default Submit Button
Jun 10, 2006 02:18 PM|LINK
Rohit Gupta
Member
318 Points
86 Posts
Re: ASP.NET 2.0 - Enter Key - Default Submit Button
Jun 14, 2006 08:30 PM|LINK
You can also define the defaultbutton property in a panel as well ...
RG
hondav
Member
10 Points
2 Posts
Re: ASP.NET 2.0 - Enter Key - Default Submit Button
Jun 26, 2006 07:43 AM|LINK
LudovicoVan
Star
9692 Points
1935 Posts
Re: ASP.NET 2.0 - Enter Key - Default Submit Button
Aug 05, 2006 03:57 AM|LINK
Indeed, there's no need to do all this work.
Check this topic for a clean approach: http://forums.asp.net/thread/1361423.aspx
HTH. -LV
dabas
Member
20 Points
4 Posts
Re: ASP.NET 2.0 - Enter Key - Default Submit Button
Aug 07, 2006 09:03 AM|LINK
hi ranghan
Can you tell me how can i do that the same in version 1.
if u know then plz send me the code .
thanx in advance
ranganh
Star
12085 Points
2435 Posts
Microsoft
Re: ASP.NET 2.0 - Enter Key - Default Submit Button
Aug 07, 2006 02:01 PM|LINK
>> Indeed, there's no need to do all this work.
The main aim of the defaultButton is to ensure Enter Key Submissions. Typically people are very much used to Enter Key submission and if we disable it might be annoying certain times.
The defaultButton really provides a way to handle Enter Keys for respective portions of the page when the focus is there.
Hope this clarifies.
Thanks.
Harish
http://geekswithblogs.net/ranganh
LudovicoVan
Star
9692 Points
1935 Posts
Re: ASP.NET 2.0 - Enter Key - Default Submit Button
Aug 07, 2006 02:36 PM|LINK
> The main aim of the defaultButton is to ensure Enter Key Submissions. Typically people are very much used to Enter Key submission and if we disable it might be annoying certain times.
Sorry, but i don't think so. A form submitted with an enter key is on the contrary a problem you encounter any time you have a *single* textbox in a form, and it is a legacy behaviour you usually have to... disable. Now the Fwk has a defaultButton property, but that outputs some javascript to handle key events and act accordingly, so this is something *more* than simply dealing with this legacy behaviour with enter keys. That is, i would at least combine them both: first, disable legacy behaviour, then eventually add support for enter key submission...
As [hondav] is telling:
> There is a BUG, to use Microsoft's own words and instead of fixing it they give you the option of deciding which way the bug is going to work.
So, great to have a defaultButton and great you have posted a sample usage. Yet i believe this should be unrelated to the legacy behaviour we are talking about.
My humble opinion. -LV
FMastro
Member
624 Points
160 Posts
Re: ASP.NET 2.0 - Enter Key - Default Submit Button
Aug 14, 2006 06:29 PM|LINK
I have this same question. Even worse is I have an asp:login which iselt creates the button. So how can I set the ASP.Net 2.0 Login window to fire the button click on Enter? And it's in a asp:content
FredMastro.Com
eappell
Member
491 Points
268 Posts
Re: ASP.NET 2.0 - Enter Key - Default Submit Button
Aug 21, 2006 10:10 PM|LINK
I've been struggling with how to capture the ENTER key and send the user one or the other result popup. Then someone directed me to your article here. I inserted two panels enclosing the two different sets of controls into the panels. I set the defaultbutton for the panels and tried it out. It works the first time I hit the ENTER key on any field. But if the user hits ENTER again, the first form is ALWAYS submitted. So, for example, if they didn't get the restuls they expected and went back to the main form and added more criteria and hit ENTER, it would submit the first form, which is incorrect. The user has to refresh the page to get the second form to submit on ENTER (or click the submit button). This won't work for us. I'm wondering if this is a bug, and if so is there a workaround? if not, what could I be missing to cause this behavior?
Thanks so much for your help - this webapp is nearly done, but this issue is causing me a lot of headaches! Hopefully this will be resolved soon.
Thanks again,
eddie