Enter and the Button Click EventBy Scott Mitchell
A typical data-entry page usually consists of a variety of form fields for collecting user input along with a Submit button. To create such a page, you'd add the appropriate set of Web controls onto your ASP.NET page - a dash of TextBoxes and a sprinkle of CheckBoxLists, perhaps - along with a Button Web control. Once the user interface portion was complete you'd wrap up the project by creating an event handler for the Button Web control's
Clickevent and there add code to take whatever action was needed... perhaps you'd save the data to a database, or send the information to someone via an email.
When filling out such forms you have probably experienced the fact that if you hit enter when typing in a textbox the form submits. This is a feature that browsers provide to make it possible to submit a form without having to touch the mouse. For example, if you hit up Google focus is immediately set to the search textbox and, after typing in your query, you can hit Enter to see the results.
Of particular interest to ASP.NET developers, though, is that when creating an ASP.NET Web Form hitting Enter to submit the
form seemingly sometimes causes the page's Button Web control's
Click event to fire, and other times not. In
this short article we'll see under what conditions a Button Web control's
Click event might not fire when the
user submits the page hitting Enter; furthermore, we'll look at a workaround. Read on to learn more!
The Enter Key's Form Submission Origins
When filling out a form, most browsers will cause the form to be submitted if the user's focus is within a single-line textbox and they hit the Enter key. The specifics of this interaction vary from browser to browser. Some older browsers don't cause a submission upon hitting Enter; others older browser only do it if there is precisely one input form field. Modern browsers, however, all pretty much support the Enter acting as form submission, but even then they still exhibit some slight differences.
All of this madness can be traced back to blurry HTML specifications from the W3C and less than stellar standards support from browser vendors. The HTML 2.0 specification provides a short description of how the Enter key should affect form submission:
When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.This standard is less than ideal, in my opinion, because of its use of the word "should." This gives the browser vendor a bit of leeway in deciding whether or not to support this feature, but as anyone with a marketing background knows, once an idea becomes a standard in the marketplace, new vendors will have no choice but to accept the marketplace standard. That is, with the W3C's use of the word "should" various browsers could try various approaches early on in the browser war, but the winner of the browser war would dictate this functionality moving forward since competitors would want to maintain a similar user experience with the market leader.
Furthermore, this standard only mentions forms with a single-line text input, but makes no mention of forms with multiple single-line text inputs. For those we are left to guess if Enter should or should not cause a form submission. The way this has unfolded in the real world is that virtually all browsers today do support Enter as a means for form submission for forms with both one and more than one single-line text inputs.
One potential issue with form submissions via the Enter key approach arises when a form has multiple submit buttons. In such a case, when Enter is hit what button should be the one credited with triggering the form submission? It has been my experience that browsers will use the submit button that appears first in the HTML markup.
Submitting a Form with the Enter Key and a Button Web Control's
When the Enter key is pressed within an ASP.NET Web Form that has multiple single-line textboxes, the form will submit and the Button Web control that appears first in the HTML page's markup will have its
Clickevent fired. This is all expected behavior. Something funny happens in Internet Explorer, though, if the Web Form only has one single-line textbox - the Button Web control's
Clickevent doesn't fire! Yes, the form posts back, but the
Clickevent handler - the place where you placed the logic to process the user's input - doesn't execute. What's up?
The issue centers around the way that Internet Explorer posts back the form's controls when hitting enter in a form with only
one single-line textbox. Specifically, Internet Explorer does not include the submit button's name/value pair in
the post body. Since the submit button's name/value pair is not sent back, the ASP.NET engine cannot determine what induced the
postback and therefore can't raise the appropriate Button Web control's
To better understand this, consider the following scenario: imagine that we have a page that contains many single-line text
inputs with names
TextBoxN along with a submit button with name
Click Me! (the button's value is what is shown as the text of the button).
(The names here are rendered based upon the
IDs of the Web controls.) When a user fills out the form and hits
Enter within a textbox, the form will submit and send back the following string in the post body:
where Value1 ... ValueN are the values entered into
When the ASP.NET page is posted back to, it parses this string and can see that the postback was induced by the
Button Web control. It can then raise this Web control's
Click event and your event handler will execute.
Now, if you only have one single-line text input, the string posted back through the post body will omit the
btnSubmit=Click Me!. That is, if your form just contains a single-line textbox named
you'd get sent back just:
Without the information as to what button caused the postback, the ASP.NET engine cannot raise the corresponding button's
Click event. Hence, if you have a Web Form with just one single-line text input (even if there are additional
input fields, like CheckBoxLists, RadioButtonLists, DropDownLists, and so on), hitting enter in the text input will not
cause the Button Web control's
Click event to fire when using Internet Explorer - other browsers,
such as FireFox, always send back the button's name/value pair, even if there is only one text input.
|Another Common Submitting With the Enter Key Problem...|
Another common problem that can arise regarding submitting a form with the Enter key occurs when there
are multiple submit buttons on the page. In such a case, the browser sends the name/value pair of the
submit button that appears first in the rendered markup (which is not necessarily the one whose |
Providing a Workaround
If your site has a Web Form with a single TextBox Web control your user's visiting with Internet Explorer won't be able to have the appropriate action be completed upon hitting enter in the textbox. That is, they'll hit Enter and the form will postback, but whatever custom logic you had written in the Button's
Clickevent handler won't run, thereby making it seem to the user that nothing happened.
To overcome this problem you can use the following workaround - simply add another TextBox Web control to the Web Form. This will cause Internet Explorer to send back the Button Web control's name/value pair upon hitting Enter. Of course, you don't want the user to see two TextBoxes, so use a bit of CSS to hide the second one. That is, instead of using this:
Add an additional TextBox Web control to overcome the Enter problem in IE, but hide the TextBox so your users see only one:
That's all there is to it!
In this article we examined why in certain situations with certain browsers a user hitting Enter might very well submit a Web Form but not cause the Button's
Clickevent to fire. This limitation can easily be overcome by never creating a Web Form with just one TextBox. Rather, if you have a situation where you only want one TextBox, add an additional "synthetic" TextBox - one that exists solely to overcome this issue. As discussed, you can easily hide this "synthetic" TextBox with a bit of CSS markup.
- FORM submission and the ENTER key?
- FAQs relating to 'Pressing Enter Key for Form Submission'
- Two Common Pitfalls When Submitting a Web Form Using the Enter Key