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).
To 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">
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:
- 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"/>
- 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>
- 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!
