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


The information in this article applies to:

  • Microsoft Internet Explorer (Programming) 4.0
  • Microsoft Internet Explorer (Programming) 4.01
  • Microsoft Internet Explorer (Programming) 4.01 SP1
  • Microsoft Internet Explorer (Programming) 4.01 SP2
  • Microsoft Internet Explorer (Programming) 5
  • Microsoft Internet Explorer (Programming) 5.01
  • Microsoft Internet Explorer (Programming) 5.01 SP1
  • Microsoft Internet Explorer (Programming) 5.5
This article was previously published under Q298498

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.

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.

REFERENCES

For more information about the onkeydown event, see the following Microsoft Web site:

http://msdn.microsoft.com/workshop/author/dhtml/reference/events/onkeydown.asp

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

Modification Type:MajorLast Reviewed:5/11/2006
Keywords:kbDHTML kbhowto kbScript KB298498
©2004 Microsoft Corporation. All rights reserved.