Recipes by Category
App Distribution (2) Bundle logic, interface and services for distribution. App Logic (37) The Apex programming language, workflow and formulas for logic. Collaboration (6) The Salesforce Chatter collaboration platform. Database (29) Data persistence, reporting and analytics. Integration (33) Web Service APIs and toolkits for integration. Security (9) Platform, application and data security. Tools (4) Force.com tooling User Interface (36) Visualforce MVC and metadata-drive user interfaces. Web Sites (12) Public web sites and apps with optional user registration and login.
Beta Feedback
Cookbook Home » Submit a Form with the Enter Key
Verify this Recipe Subscribe to this recipe View source code

Submit a Form with the Enter Key

Post by jhersh  (2010-08-04)

Status: Unverified
Level: novice

Problem

You've created a form in Visualforce. When pushing enter while using the form, the page refreshes instead of submitting your form. It's an easy fix with a small bit of JavaScript, which does wonders for your app's user experience.

Solution

In your Visualforce page, define this JavaScript function. It intercepts key presses on your form elements.

<script type='text/javascript'>
	function noenter(ev)  {
	   	if (window.event && window.event.keyCode == 13 || ev.which == 13) {
	   		doSearchAF();
	       	return false;
	     } else {
	          return true;
	     }
	 }
</script>

Also, define this ActionFunction and tie it to your submit method in your controller.

<apex:actionFunction name='doSearchAF' action='{!doSearch}' />

Lastly, this 'onkeypress' event should be added to every textual form element that should intercept a press of the enter key.

<apex:inputtext value='{!settings.searchStr}' id='searchStr' styleclass='searchStr' onkeypress='return noenter(event);' />

Discussion

Make sure the ActionFunction name matches up with the JavaScript function you're calling from noEnter(). When someone hits Enter, the noEnter() JavaScript function will get called, which in turn will call the doSearchAF ActionFunction, which invokes your forms submit action, in this case doSearch().

Share

Recipe Activity - Please Log in to write a comment

Is there a way to tweek this, so it will make the Enter key work as the Tab key?

by a093000000VF9rg  (2012-10-23)

The script works fine for me for inputText fields, i also have a radio button, if i select the radio button and enter it's not working any ideas on how to acomplish this one, 

<apex:pageblocksectionItem >
                    <apex:outputLabel value="Job Type" for="jt"/>
                    <apex:outputPanel id="jt">
                         <apex:selectRadio value="{!SelectJobType}" onclick="return noenter(event);">
                             <apex:selectOptions value="{!jobType}"/>
                         </apex:selectRadio>
                     </apex:outputPanel>               
                </apex:pageblocksectionItem>

by Anupama Annamaneni  (2012-09-06)

Working with Chrome v19

voted as verified by Sean Harrison  (2012-05-25)

Verified - works with IE 6 and Firefox 3.6

voted as verified by shiv.rajaraman02202010  (2011-02-01)

The if statement i have that says

if($('.cWatchInput').val().length >= 3){
                        $('.cSearchBtn').click();               
                    }

just checks to make sure the input field has more than 3 char and then forces a click on the button, but you can also just return true.

by Randi Warner  (2010-10-26)

That code isnt supported cross browser,  and there is a safty net you can use to make sure the defualt is prevented, you can do the following in jQuery

function noenter(e)  {
code = e.keyCode ? e.keyCode : e.which;
                if (code.toString() == 13){
                    e.preventDefault();
                    if($('.cWatchInput').val().length >= 3){
                        $('.cSearchBtn').click();               
                    }
                }
}

by Randi Warner  (2010-10-26)

There's another way that I can't take credit for thinking up that's remarkably similar, it seems to work in some situations where the above doesn't, such as text fields in forms that should have an action different than the default form submission (e.g. a search box):

<apex:inputText (your args) onkeydown="if(event.keyCode==13){this.blur();actionFunction();}" />
 

by Bluehawk_Networks  (2010-09-16)

X

Vote to Verify a Recipe

Verifying a recipe is a way to give feedback to others and broaden your own understanding of the capabilities on Force.com. When you verify a recipe, please make sure the code runs, and the functionality solves the articulated problem as expected.

Please make sure:
  • All the necessary pieces are mentioned
  • You have tested the recipe in practice
  • Have sent any suggestions for improvements to the author

Please Log in to verify a recipe

You have voted to verify this recipe.