Posts Tagged ‘enter’

Programmatically Submit Form on Enter Key in C#

By default, a majority of the pages and all the functions on a C# Web Application page are all contained within a single form element. Therefore, there may be multiple buttons or other postback controls within a single form. And this may be the reason why there isn’t by default a control which is automatically called when the web users hits the ENTER button.

To Assign a Default On a Standard C# Webpage

This is the default way and involves the name of the control. If you have a ASP Button called btnSearch, the code you would include in the Page_Load function.

this.Form.DefaultButton = “btnSearch”;

To Assign a Default On a Content Page (from a MasterPage) C# Webpage

If your Web application uses MasterPages and you want to assign a control to submit the form on the Enter key, you concept is the same as above, but you’ll need to pass the UniqueId of the control. Assume a control called btnSearch on a ContentPage, add the following to the Page_Load function.

this.Form.DefaultButton = btnSearch.UniqueId;

Some benefits to programmatically assigning the Enter key is your ability to change which Postback function to assign based on how the web user enters the page. Other than that, assigning the default submit control is a major convenience factor for web users.

References:
http://msdn.microsoft.com/en-us/library/system.web.ui.htmlcontrols.htmlform.defaultbutton.aspx

Form Submit On Enter in Visual Studio 2008

Until recently, I had always used javascript to allow the enter key to submit a form (as seen in a previous posting called Submit Form On Enter Key Solution). Since then, I was queued into a GUImethod of controlling enter key form submissions in Visual Studio 2008 (and I’m sure this works in other versions as well).

How to submit a form in Visual Studio 2008To do this in the GUI style, click on the form of the page and then select the elements properties. Under the ASP.NET subheading, there is a form property called DefaultButton. Insert the button control id of the default button. This will essentially submit the form on enter (by performing the action on the specified button). The image to the left is an example of the form property section with a default button set to btnSetCookie. Note that for one reason or another, intellisense is not enabled on this property and you will have to manually type in the button control id.

Of course, you are not constrained to doing this in the GUI style. To submit a form on enter programmatically, simply find the form and insert the keyword defaultbutton=”BUTTON_CONTROL_ID_HERE”. Below is an example of how the above example would look programmatically.

<form id="frmTestForm" runat="server" defaultbutton="btnSetCookie">
				

Submit Form On Enter Key Solution

It is natural for web users to hit the enter key to submit a form or otherwise activate an action. There have been several cases where the form does not submit on the enter key. The below example works.

<body>
   <form id="form1" runat="server">
      <div>
         <asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>
         <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
         <asp:Label ID="lblOutput" runat="server" Text=""></asp:Label>
      </div>
   </form>
</body>

The Button1_Click action simply copies the input text from txtFirstName into the label lblOutput. Because this simple example works, one would expect this to work in every case. That is not the case. If hitting the enter key does not submit the form, try one of the following below:

  1. Try putting an invisible HTML Input (Submit) button. Though this has worked for others, it did not work for my situation.
    <input type="text" style="display:none"/>
  2. A second option to try is to use a onKeyDown event. This second option will append a moderately long javascript script to check for the enter key on each button press. If the button is pressed, it activates the form submit. To use this, place this script in the head. Finally, on the last input textbox, use the following:
    onKeyPress="return submitFormWithEnter(this,event)"

    The script is below goes in the within html head tags:

    <script type="text/javascript">
    
    function submitFormWithEnter(myfield,e)
    {
       var keycode;
       if (window.event)
       {
          keycode = window.event.keyCode;
       }
       else if (e)
       {
          keycode = e.which;
       }
       else
       {
          return true;
       }
    
       if (keycode == 13)
       {
          myfield.form.submit();
          return false;
       }
       else
       {
          return true;
       }
    }
    </script>
  3. This last situation, which worked best for me also checks for the enter key using javascript, but instead of simply activating the form’s action, the function to be run is directly specified. Below, EmailTextBox is the last input TextBox element. Next, replace LoginButton with the ASP Submit Buttton. This script needs to go in the Page_Load section of the codebehind.
    EmailTextBox.Attributes.Add("onKeyPress", "javascript:if (event.keyCode == 13) __doPostBack('" + LoginButton.UniqueID + "','')");

- EDIT JULY 16, 2008 -

See Form Submit On Enter in Visual Studio post for both the GUI and programmatic way to submit form using the enter key!