You need to sign in to do that
Don't have an account?

Enter key on VF-Page
Hello everyone,
we have developed a small customer search in salesforce. If you click on the "search" button manually, everything is working fine, but by clicking on the enter key, nothing happens.
I know that problems like this are discussed here quite often, but I didn't find a solution for my problem.
<apex:page controller="SearchFirstController" tabStyle="Search_Create__tab"> <apex:sectionHeader title="{!$Label.sfTitle}" subtitle="{!$Label.sfSubTitle}" description="{!$Label.sfTitleDescription}"/> <apex:outputPanel id="errorPanel"> <apex:pageMessage strength="2" title="{!errorTitle}" summary="{!errorMessage}" severity="{!errorSeverity}" rendered="{!errorShow}" /> </apex:outputPanel> <apex:outputPanel id="searchPanel" styleClass="searchFilterFields"> <apex:form id="searchForm"> <div class="searchFilterFieldsHolder"> <table class="searchFilterFields" width="100%"> <tr> <td width="250px"> <table width="100%"> <tr> <td> <apex:outputLabel value="{!$Label.sfFirstName}" for="searchFirstName"/> </td> <td width="100%"> <apex:inputText value="{!searchFirstName}" id="searchFirstName" required="false"/> </td> </tr> <tr> <td> <apex:outputLabel value="{!$Label.sfLastName}" for="searchLastName"/> </td> <td width="100%"> <apex:inputText value="{!searchLastname}" id="searchLastName" required="false"/> </td> </tr> <tr> <td> <apex:outputLabel value="{!$Label.sfAccount}" for="searchCompany"/> </td> <td width="100%"> <apex:inputText value="{!searchCompany}" id="searchCompany" required="false"/> </td> </tr> <tr> <td> <apex:outputLabel value="{!$Label.sfPhone}" for="searchdPhone"/> </td> <td width="100%"> <apex:inputText value="{!searchPhone}" id="searchPhone" required="false"/> </td> </tr> <tr> <td> <apex:outputLabel value="{!$Label.sfEmail}" for="searchEmail"/> </td> <td width="100%"> <apex:inputText value="{!searchEmail}" id="searchEmail" required="false"/> </td> </tr> <tr> <td> </td> <td width="100%"> <apex:commandButton value="{!$Label.btnSearch}" action="{!search}" rerender="resultPanel,errorPanel" styleClass="searchFilterButton" status="processingStatus"/> <apex:commandButton value="{!$Label.btnReset}" action="{!reset}" rerender="searchPanel,resultPanel,errorPanel" styleClass="searchFilterButton"/> </td> </tr> </table> </td> <td align="center" valign="middle"><table style="font-size:80%;"><tr><td width="20%" align="right"><strong>{!$Label.sfAsterik}</strong></td><td width="80%">{!$Label.sfAsterikText}</td></tr><tr><td width="20%" align="right"><strong>{!$Label.sfQuestionmark}</strong></td><td width="80%">{!$Label.sfQuestionmarkText}</td></tr></table></td></tr></table> </div> </apex:form> <center><apex:actionStatus id="processingStatus" startText="{!$Label.sfProcessRequest}"/></center> </apex:outputPanel> <br/> <apex:outputPanel id="resultPanel"> <apex:form id="resultForm"> <apex:pageBlock id="leadresultPanel" title="{!$Label.sfLeads}{!If(numLeads > 0,' [' & text(numLeads) & ']',' [0]')}" tabStyle="Lead"> <apex:pageMessage strength="2" severity="info" summary="{!$Label.sfNoLeadResultWarning}" rendered="{!noLeadResult}" /> <apex:pageBlockSection title="{!$Label.sfMatchingLeads}" collapsible="true" columns="1" rendered="{!NOT(emptyLeadList)}"> <apex:pageBlockTable value="{!resultListLeads}" var="leadItem"> <apex:column > <apex:facet name="header">{!$Label.sfLeadName}</apex:facet> <apex:outputLink value="{!URLFOR($Action.Lead.View, leadItem.Id)}">{!leadItem.Firstname} {!leadItem.Lastname}</apex:outputLink> </apex:column> <apex:column > <apex:facet name="header">{!$Label.sfLeadCompany}</apex:facet> <apex:outputLink value="{!URLFOR($Action.Lead.View, leadItem.Id)}">{!leadItem.Company}</apex:outputLink> </apex:column> <apex:column value="{!leadItem.Phone}"/> <apex:column value="{!leadItem.Email}"/> <apex:column value="{!leadItem.Status}"/> </apex:pageBlockTable> </apex:pageBlockSection> <apex:commandButton id="createNewLead" value="{!$Label.btnNew}" action="{!createNewLead}"/> </apex:pageBlock> <apex:pageBlock id="contactresultPanel" title="{!$Label.sfContacts}{!If(numContacts > 0,' [' & text(numContacts) & ']',' [0]')}" tabStyle="Contact"> <apex:pageMessage strength="2" severity="info" summary="{!$Label.sfNoContactResultWarning}" rendered="{!noContactResult}" /> <apex:pageBlockSection title="{!$Label.sfMatchingContacts}" collapsible="true" columns="1" rendered="{!NOT(emptyContactList)}"> <apex:pageBlockTable value="{!resultListContacts}" var="contactItem"> <apex:column > <apex:facet name="header">{!$Label.sfContactName}</apex:facet> <apex:outputLink value="{!URLFOR($Action.Contact.View, contactItem.Id)}">{!contactItem.Firstname} {!contactItem.Lastname}</apex:outputLink> </apex:column> <!-- <apex:column value="{!contactItem.Company}"/>--> <apex:column value="{!contactItem.Phone}"/> <apex:column value="{!contactItem.Email}"/> </apex:pageBlockTable> </apex:pageBlockSection> <apex:commandButton id="createNewLead" value="{!$Label.btnNew}" action="{!createNewContact}"/> </apex:pageBlock> <apex:pageBlock id="accountresultPanel" title="{!$Label.sfAccounts}{!If(numAccounts > 0,' [' & text(numAccounts) & ']',' [0]')}" tabStyle="Account"> <apex:pageMessage strength="2" severity="info" summary="{!$Label.sfNoAccountResultWarning}" rendered="{!noAccountResult}" /> <apex:pageBlockSection title="{!$Label.sfMatchingAccounts}" collapsible="true" columns="1" rendered="{!NOT(emptyAccountList)}"> <apex:pageBlockTable value="{!resultListAccounts}" var="accountItem"> <apex:column > <apex:facet name="header">{!$Label.sfAccountName}</apex:facet> <apex:outputLink value="{!URLFOR($Action.Account.View, accountItem.Id)}">{!accountItem.Name}</apex:outputLink> </apex:column> <apex:column value="{!accountItem.Phone}"/> <apex:column value="{!accountItem.Type}"/> </apex:pageBlockTable> </apex:pageBlockSection> <apex:commandButton id="createNewAccount" value="{!$Label.btnNew}" action="{!createNewAccount}"/> </apex:pageBlock> </apex:form> </apex:outputPanel> </apex:page>
Thanks and regards
Markus
I've got the script sitting just inside the apex:form tag, but I wouldn't expact that the be the problem.
I have had browser compatibility issues though - below is a revised version that should work for both ie/firefox:
Try that and see how you get on. If that doesn't do the trick, I'd suggest adding alerts to prove that you are getting to the noenter function and that you can retrieve the event etc.
All Answers
I've used the onkeypress attribute for the search input field.
Add the following attribute to your field like so:
And have some javascript that takes appropriate action. Mine locates the search button on the form and programmatically clicks it:
Have you handled the key event(Enter Key)? See the following sample :
Use this javascript method on VF component; and invoke this method inside javascript function like this way:
<script>
function onKeyup_TxtFieldcom(e)
{
var keynum;
if(window.event) // IE(behave different in IE that's why used here)
{
keynum = e.keyCode;
}
if(keynum == 13)
{
// You logic here..
return false;
}
}
</script>
Hope this helps.
Hmm, so i tried your example, but it didn't work (or I am too stupid :) )
I added the
event to every input box and the JS code (is there a special place necessary for the code?):
The id is the id of the button.
What am i doing wrong?
Regards
Markus
I've got the script sitting just inside the apex:form tag, but I wouldn't expact that the be the problem.
I have had browser compatibility issues though - below is a revised version that should work for both ie/firefox:
Try that and see how you get on. If that doesn't do the trick, I'd suggest adding alerts to prove that you are getting to the noenter function and that you can retrieve the event etc.
Hello bob,
thanks for your help, it is working fine now (with some changes).
Kind regards
Markus
Hi Markus,
Do you have any insight about the changes you made to get this to work?
Also, any browser compatibility info would help.
Thanks!
Emily
Hi Emily,
this is nearly two years ago :-) But this is still working for me.
I have a button like this:
<apex:commandButton action="{!runSearch}" value="{!$Label.arl_CS_SearchMask_ButtonSearch}" rerender="results" status="searchStatus" id="btnSearchButton"/>
and two small javascript-statements :
1)
<script type="text/javascript">
var searchButtonID = document.getElementById("{!$Component.btnSearchButton}").id;
</script>
2)
<script type="text/javascript">
function submitForm(e)
{
var keynum = 0;
if (window.event)
{
keynum = window.event.keyCode;
}
else if (e.which)
{
keynum = e.which;
}
if (keynum == 13)
{
document.getElementById(searchButtonID).click();
}
}
</script>
And the apex:pageBlock looks like:
<apex:pageBlock title="{!$Label.arl_CS_SearchHeader}" mode="edit" id="criteria" onkeyup="submitForm(event)" >
I hope this helps you.
Thank you so much! I appreciate you looking that up.
I'm still trying to get the Enter key to fire off the right CommandButton in my page. I have three buttons, two of which do the same thing, RunSearch. The third runs a csv download page.
I've tried both versions of the code in this thread. The version below is Bob Buzzard's.. No matter what I do the last button, ID= theExportPage is the one that happens when I press enter.
Any suggestions?
thanks.... Bob
It turns out that the location of the JavaScript in the VF page matters. At least it does for my page.
Here is code that works for me. I left in the JS Alerts in case it's useful.
Thanks to Bob Buzzard for all the good things I've learned from these old threads.
...Bob
I tried an unobtrusive variation on Bobs code with jquery that I couldn't get working for some reason. I ended up using his version.
If anyone could figure out why mine wouldn't work I'm actually very curious. The odd part is, I verified the key was 13 and I was entering the IF key==13 condition. I also verified the .click() function would fire by moving it right before the if key==13 condition. However, as soon as I moved it inside the IF statement I know it was entering it didn't work. It seemed to just refresh my page.
If you can see something wrong please let me know!
For anyone that comes across this post in a search I was able to get it working:
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,
I referred the http://developer.force.com/cookbook/recipe/submit-a-form-with-the-enter-key
Please Help.
please help me...
<apex:page standardController="account" extensions="enterkeyclass">
<apex:form title="s">
<script type="text/javascript">
function noenter(e){
if(window.event){
key = window.event.keyCode; //IE
}
else{
key = e.which; //firefox
}
if(key == 13) {
var ele=document.getElementById('page:crit:gobutton');
ele.click();
return false;
} else{
return true;
}
}
</script>
<apex:pageBlock title="crit_block" >
<apex:messages />
<apex:actionFunction name="doSearchAF" action="{!searchJobs}" />
<apex:pageBlockButtons location="bottom">
<apex:commandButton value="SearchJobs" action="{!searchJobs}" onkeypress="return noenter(event)" id="s" />
</apex:pageBlockButtons>
<apex:pageBlockSection >
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>
---------------------
public class enterkeyclass {
Apexpages.Message mess;
public enterkeyclass(ApexPages.StandardController controller) {
}
public pagereference searchJobs(){
mess = new Apexpages.Message( Apexpages.Severity.ERROR,'No Results Found');
return null;
}
}
it will fire only once......i need more then action ....
Hello bob_buzzard,
i am newbie in Salesforce Apex
i am stuck on apex code and i think you are the perfect person who can help me out and i need to discusses few things with you. so can you please share some personal details with me ??
and if you want know about my problem you can click link below, i have already posted my problem here.
https://developer.salesforce.com/forums/ForumsMain?id=9060G000000XbUOQA0
Please help me Bob :(
Email - bharatsharma.0619@gmail.com
Thanks and Regards
Bharat Sharma