Microsoft KB Archive Search

Notice: This website is an unofficial Microsoft Knowledge Base (hereinafter KB) archive and is intended to provide a reliable access to deleted content from Microsoft KB. All KB articles are owned by Microsoft Corporation. Read full disclaimer for more details.

  1. Home
  2. How To Prevent Form Submission When User Presses the ENTER Key on a Form

How To Prevent Form Submission When User Presses the ENTER Key on a Form

View products that this article applies to.

Summary

When the focus is on an HTML form, and the user presses the ENTER key, by default, Internet Explorer treats this action as if the user clicks Submit. However, not all browsers behave the same way, and you may want to disable this behavior. This article demonstrates how to use script to prevent this behavior.

↑ Back to the top

More information

The following steps demonstrate how to handle the onkeydown event for the INPUT element and cancel the event altogether to prevent Internet Explorer from submitting the form submission when a user presses the ENTER key.
  1. In your favorite HTML editor, create a new HTML file named Test.htm, and paste the following code:
    <HTML>
<HEAD>
<SCRIPT LANGUAGE="javascript"> 
function testForEnter() 
{    
	if (event.keyCode == 13) 
	{        
		event.cancelBubble = true;
		event.returnValue = false;
         }
} 
</SCRIPT> 
</HEAD>  

<BODY>

<FORM id="FORM1" name="FORM1" method="GET" action="testSubmit.htm" 
style="background-color:yellow">
<H3>Form1: Does not stop form submission when user presses ENTER key.</H3>
<INPUT id="text1" name="text1"> 
<INPUT type="submit" value="Submit">
</FORM>

<FORM id="FORM2" name="FORM2" method="GET" action="testSubmit.htm" 
style="background-color:lightblue"> 
<H3>Form2: Stops form submission when user presses ENTER key.</H3>
<INPUT id="text2" name="text2" onkeydown="testForEnter();">
<INPUT type="submit" value="Submit">		 
</FORM> 

</BODY>

</HTML>
  2. Create another HTML file named testSubmit.htm, and paste the following code:
    <HTML>
<HEAD>
<SCRIPT LANGUAGE="javascript">
window.onload = window_onload;
function window_onload()
{
	alert ("The form has submitted.");
}
</SCRIPT>  
</HEAD>

<BODY>
<DIV align="center">This is testSubmit.htm.</DIV>
</BODY>
</HTML>
  3. In Internet Explorer, browse to Test.htm.
  4. Set focus to the text box inside "Form1," and then press the ENTER key. Notice that the form is submitted because this is the default behavior.
  5. In Internet Explorer, browse back to Test.htm.
  6. Set focus to the text box inside "Form2," and then press the ENTER key. Notice that the form is not submitted. When you look at the code behind the onclick event, notice that you cancel the navigation by canceling the event.

↑ Back to the top

References

For more information about the onkeydown event, see the following Microsoft Web site:
http://msdn2.microsoft.com/en-us/library/ms536938.aspx
For more information about developing Web-based solutions for Microsoft Internet Explorer, visit the following Microsoft Web sites:
http://msdn.microsoft.com/ie/

http://support.microsoft.com/iep

↑ Back to the top

Properties

Retired KB Content Disclaimer
This article was written about products for which Microsoft no longer offers support. Therefore, this article is offered "as is" and will no longer be updated.

↑ Back to the top

Keywords: KB298498, kbscript, kbhowto, kbdhtml

↑ Back to the top

Article Info
Article ID : 298498
Revision : 4
Created on : 5/17/2007
Published on : 5/17/2007
Exists online : False
Views : 498