function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
WesNolte__cWesNolte__c 

Bug: CommandButton not submitting a form when Enter Key pressed

Hello

 

I've had this issue before with commandLinks but now I'm having it with commandbuttons too. This used to work. Looking at the code it seems some javascript submits the form, but something is a tad wrong there. If I click the button the form submits, but most users are trying to press enter(like they used to do). This seems to be a problem on na7 but not on na6. My page,

 

 

<apex:page controller="EditStandardObjSites"  cache="false">
    <apex:form >
        <apex:pageblock >
            <apex:pageBlockSection >
                <apex:outputLabel value="{!acc.id}"/>  <apex:inputText value="{!name}"/> <apex:commandButton value="Save" action="{!save}" />
 
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>
 
The controller just has a public string property and and account object, along with a method to save said object. Note: this updates the account name when I press the button, but not if I simply press enter.
 
Any ideas?
 
Wes 
 
 


Best Answer chosen by Admin (Salesforce Developers) 
bob_buzzardbob_buzzard
I've been hit by this a few times in the past - the form seems to get submitted, but not to my action function, resulting in some kind ofrefresh to the page that doesn't have the effect I wanted.
 
I have gone the following route to handle this:
 
On my input field I have the following onkeypress handler:
 
<apex:inputText id="firstName" value="{!searchCriteria.firstName}" onkeypress="return noenter(event);"/>

 
 
 
The noenter javascript is:
 
 
      <script>
      function noenter(ev) 
      {
         
         if (window.event && window.event.keyCode == 13 || ev.which == 13)
         {
            var ele=document.getElementById('{!$Component.form.crit_block.crit_section.searchbtn}');
            ele.click();
            return false;
         }
         else
         {
            return true;
         }
      }
   </script>

 
 
where {!$Component.form.crit_block.crit_section.searchBtn} equates to the id of the search button.
 
So this javascript intercepts all keypresses for the input field and, if return is pressed, locates the button and clicks it.


All Answers
bob_buzzardbob_buzzard
I've been hit by this a few times in the past - the form seems to get submitted, but not to my action function, resulting in some kind ofrefresh to the page that doesn't have the effect I wanted.
 
I have gone the following route to handle this:
 
On my input field I have the following onkeypress handler:
 
<apex:inputText id="firstName" value="{!searchCriteria.firstName}" onkeypress="return noenter(event);"/>

 
 
 
The noenter javascript is:
 
 
      <script>
      function noenter(ev) 
      {
         
         if (window.event && window.event.keyCode == 13 || ev.which == 13)
         {
            var ele=document.getElementById('{!$Component.form.crit_block.crit_section.searchbtn}');
            ele.click();
            return false;
         }
         else
         {
            return true;
         }
      }
   </script>

 
 
where {!$Component.form.crit_block.crit_section.searchBtn} equates to the id of the search button.
 
So this javascript intercepts all keypresses for the input field and, if return is pressed, locates the button and clicks it.
This was selected as the best answer
WesNolte__cWesNolte__c
Thanks buddy, that did the trick. I've tried something similar with commandlinks and JS before, but my solution wasn't as neat as yours. I'd still like to have it fixed as this implementation would be necessary on each button, not so much of nice.
 
Thanks again,
Wes 


JMPlayer22JMPlayer22
This is beautiful.  
 
Took me a minute to find the button ID for salesforce sites though...I ended up having to do an "inspect element" on the button itself and copy/paste the entire ID from the inspect element info like this:
 
document.getelementbyId('j_id0:j_id28:j_id29:j_id30:j_id43:hitthebutton');
  
 
"hitthebutton" was the ID I gave the button in the APEX code
 
"j_id0:j_id28:j_id29:j_id30:j_id43:hitthebutton" was  the ID I got from "Inspect Element" 
 
Hope that helps somebody else!
Message Edited by JMPlayer22 on  11-16-2009 01:38 PM


WesNolte__cWesNolte__c
Heya
 
Ids can change if you move an element around.. you can do this to safeguard against that:
 
 
<apex:page controller="SubmitTestController">
   <script>
      function noenter(ev) 
      {
         
         if (window.event && window.event.keyCode == 13 || ev.which == 13)
         {
            var ele=document.getElementById(cl);
            ele.click();
            return false;
         }
         else
         {
            return true;
         }
      }
   </script>

	<apex:outputText value="{!$CurrentPage.Parameters.var}"/>
	<apex:form>
		<apex:outputLabel for="theInput" value="Please enter a bit of text: "/>
		<apex:inputText id="theInput" value="{!variable}"/>
		<apex:commandLink value="Submit" action="{!submit}" onkeypress="return noenter(event);" id="theLink"/>
		<script> var cl = '{!$Component.theLink}';
	</apex:form>
</apex:page>
 
 
 


JMPlayer22JMPlayer22
That doesn't seem to be working...here's what IS working:
 
 
<apex:page showheader="false" action="{!initList}"
controller="MSearch"
standardStylesheets="true">

<script>
    function noenter(ev) 
    {
        if (window.event && window.event.keyCode == 13 || ev.which == 13)
        {            
            var ele=document.getElementById('j_id0:j_id20:j_id21:j_id22:j_id34:hitthebutton');          
            ele.click();
            return false;
        }
        else
        {
            return true;
        }
    }
</script>

<apex:pageBlock title="Search to see more">
<apex:pageBlockSection columns="1">

<apex:pageBlockSectionItem >
    <apex:outputtext value="Keyword"/>      
    <apex:inputText id="searchBox" value="{!searchPosition}" onkeypress="return noenter(event);"/>
</apex:pageBlockSectionItem> 
   
<apex:pageBlockSectionItem >
    <apex:outputtext value=""/>
    <apex:commandButton action="{!PopulateQuery}" value="Search" id="hitthebutton" rerender="JobList"/>
</apex:pageBlockSectionItem>

</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>...[code continues...has a table that's populated upon clicking search]...

</apex:page>
 
 Here's what ISN'T working
 
 
<apex:page showheader="false" action="{!initList}"
controller="MSearch"
standardStylesheets="true">

<script>
    function noenter(ev) 
    {
        if (window.event && window.event.keyCode == 13 || ev.which == 13)
        {            
            var ele=document.getElementById('{!$Component.hitthebutton}');          
            ele.click();
            return false;
        }
        else
        {
            return true;
        }
    }
</script>

<apex:pageBlock title="Search to see more">
<apex:pageBlockSection columns="1">

<apex:pageBlockSectionItem >
    <apex:outputtext value="Keyword"/>      
    <apex:inputText id="searchBox" value="{!searchPosition}" onkeypress="return noenter(event);"/>
</apex:pageBlockSectionItem> 
   
<apex:pageBlockSectionItem >
    <apex:outputtext value=""/>
    <apex:commandButton action="{!PopulateQuery}" value="Search" id="hitthebutton" rerender="JobList"/>
</apex:pageBlockSectionItem>

</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>...[code continues...has a table that's populated upon clicking search]...

</apex:page>
 
 
I also tried this (and it didn't work):
<apex:page showheader="false" action="{!initList}"
controller="MSearch"
standardStylesheets="true">

<script>
    function noenter(ev) 
    {
        if (window.event && window.event.keyCode == 13 || ev.which == 13)
        {            
            var ele=document.getElementById(cl);          
            ele.click();
            return false;
        }
        else
        {
            return true;
        }
    }
</script>

<apex:pageBlock title="Search to see more">
<apex:pageBlockSection columns="1">

<apex:pageBlockSectionItem >
    <apex:outputtext value="Keyword"/>      
    <apex:inputText id="searchBox" value="{!searchPosition}" onkeypress="return noenter(event);"/>
</apex:pageBlockSectionItem> 
   
<apex:pageBlockSectionItem >
    <apex:outputtext value=""/>
    <apex:commandButton action="{!PopulateQuery}" value="Search" id="hitthebutton" rerender="JobList"/>
</apex:pageBlockSectionItem>

<script> var cl = '{!$Component.hitthebutton}';</script>

</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>...[code continues...has a table that's populated upon clicking search]...

</apex:page>
 
 
 I'm not sure if the order things are in there is what's throwing it off...or that it's within pageBlockSections...(it won't allow me to put the script inside the pageBlockSections).
 
This is using the Salesforce Sites thing too...I'm using the Salesforce Free Edition to store/track my DVD collection in Salesforce.  I got sick of people borrowing them and not returning them for months or never returning them at all...and since we have over 400 DVDs it's hard to keep track of what's missing.
 
Anyway...it's not a HUGE pressing matter or anything because it's just for personal use (not business)...but I figured somebody else could maybe benefit from the solution for business reasons. 
 
 
 
 


WesNolte__cWesNolte__c
Hey
 
If you use my code as it stands it will work.. the trick is to put the <script> declaration at the same level in the DOM tree as the $Component that you are referencing. It's not obvious, and it got me the first time too e.g.
 
 
<apex:page showheader="false" action="{!initList}"
controller="MSearch"
standardStylesheets="true">

<script>
    function noenter(ev) 
    {
        if (window.event && window.event.keyCode == 13 || ev.which == 13)
        {            
            var ele=document.getElementById(cl);          
            ele.click();
            return false;
        }
        else
        {
            return true;
        }
    }
</script>

<apex:pageBlock title="Search to see more">
<apex:pageBlockSection columns="1">

<apex:pageBlockSectionItem >
    <apex:outputtext value="Keyword"/>      
    <apex:inputText id="searchBox" value="{!searchPosition}" onkeypress="return noenter(event);"/>
</apex:pageBlockSectionItem> 
   
<apex:pageBlockSectionItem >
    <apex:outputtext value=""/>
    <apex:commandButton action="{!PopulateQuery}" value="Search" id="hitthebutton" rerender="JobList"/>
<script> var cl = '{!$Component.hitthebutton}';</script>
</apex:pageBlockSectionItem>



</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>...[code continues...has a table that's populated upon clicking search]...

</apex:page>
 
It's not the most elegant solution, but it ensures that any future page modifications don't interfere with the way your JS works.
 
Wes 
 


JMPlayer22JMPlayer22
Thanks for the quick response...I added that in like you have it shown in your sample and tried to save...it gave the following error and wouldn'd let me save:
 
Error: <apex:pageBlockSectionItem> may have no more than two child components
 
 
Message Edited by JMPlayer22 on  11-17-2009 08:56 AM


WesNolte__cWesNolte__c
Ah, how silly of me..
 
 
<apex:pageBlockSectionItem >
    <apex:outputtext value=""/>

<apex:outputPanel>
    <apex:commandButton action="{!PopulateQuery}" value="Search" id="hitthebutton" rerender="JobList"/>
    <script> var cl = '{!$Component.hitthebutton}';</script>
</apex:outputPanel>
</apex:pageBlockSectionItem>
 
 
 
 


JMPlayer22JMPlayer22
ZING! Awesome! That worked!  Thanks a TON!


WesNolte__cWesNolte__c
ZING! indeed:D