You need to sign in to do that
Don't have an account?
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
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
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.
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
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!
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>
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.
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
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
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>