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

Article translations Article translations
Article ID: 298498 - View products that this article applies to.
This article was previously published under Q298498
Expand all | Collapse all

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://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

Properties

Article ID: 298498 - Last Review: May 17, 2007 - Revision: 3.1
APPLIES TO
  • Microsoft Internet Explorer 4.0 128-Bit Edition
  • Microsoft Internet Explorer 4.01 Service Pack 2
  • Microsoft Internet Explorer 4.01 Service Pack 1
  • Microsoft Internet Explorer 4.01 Service Pack 2
  • Microsoft Internet Explorer 5.0
  • Microsoft Internet Explorer 5.01
  • Microsoft Internet Explorer (Programming) 5.01 SP1
  • Microsoft Internet Explorer 5.5
Keywords: 
kbdhtml kbhowto kbscript KB298498
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.

Give Feedback

 

Contact us for more help

Contact us for more help
Connect with Answer Desk for expert help.
Get more support from smallbusiness.support.microsoft.com