When you think ASP, think...
Recent Articles
All Articles
ASP.NET Articles
ASPFAQs.com
Message Board
Related Web Technologies
User Tips!
Coding Tips
Search

Sections:
Book Reviews
Sample Chapters
Commonly Asked Message Board Questions
JavaScript Tutorials
MSDN Communities Hub
Official Docs
Security
Stump the SQL Guru!
Web Hosts
XML
Information:
Advertise
Feedback
Author an Article
Jobs

ASP ASP.NET ASP FAQs Message Board Feedback ASP Jobs
 
Print this Page!
Published: Wednesday, June 8, 2005

Enter and the Button Click Event

By Scott Mitchell


Introduction


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 Click event 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!

- continued -

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 Click Event


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 Click event 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 Click event doesn't fire! Yes, the form posts back, but the Click event 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 Click event.

To better understand this, consider the following scenario: imagine that we have a page that contains many single-line text inputs with names TextBox1 through TextBoxN along with a submit button with name btnSubmit and value 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:

TextBox1=Value1&TextBox2=Value2&...&TextBoxN=ValueN&btnSubmit=Click Me!

where Value1 ... ValueN are the values entered into TextBox1 through TextBoxN.

When the ASP.NET page is posted back to, it parses this string and can see that the postback was induced by the btnSubmit 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 TextBox1 you'd get sent back just:

TextBox1=Value1

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 Click event you want to fire). To learn more about this issue and to learn an easy workaround, be sure to read Two Common Pitfalls When Submitting a Web Form Using the Enter Key.

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 Click event 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:

<form runat="server">
   Name: <asp:TextBox runat="server" id="txtName" ... />
   <br />
   <asp:Button runat="server" Text="Click Me!" ... />
</form>  

Add an additional TextBox Web control to overcome the Enter problem in IE, but hide the TextBox so your users see only one:

<form runat="server">
   Name: <asp:TextBox runat="server" id="txtName" ... />
   <br />
   <asp:TextBox runat="server" style="visibility:hidden;display:none;" />
   <asp:Button runat="server" Text="Click Me!" ... />
</form>  

That's all there is to it!

Conclusion


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 Click event 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.

For additional information about Enter and form submission, as well as JavaScript techniques for disabling submissions via Enter and ensuring submissions via Enter (for older browsers), be sure to check out the following articles:

Happy Programming!

  • By Scott Mitchell



  • ASP.NET [1.x] [2.0] | ASPMessageboard.com | ASPFAQs.com | Advertise | Feedback | Author an Article