Setting OK(submit) button in JSF 2.0 - jsf-2

Question

I have a form and two command buttons. I want that on pressing the enter key, the second commandButton is pressed, but the first commandButton is being pressed.
Please consider the following sample code.
<h:form>
<p:inputtext value="#{bean.mobileNumber}" />
<p:commandButton id="startNewChat" value="Chat" action="#{bean.startNewChat}" update="chatWindow" />
<br />
<br />
<p:outputPanel id="chatWindow">
<p:inputTextarea readonly="true" value="#{bean.chatMessages}" />
<p:inputText value="#{bean.newChatMessageFromWeb}" />
<p:commandButton id="submitChatMessage" action="#{bean.submitChatMessage}" value="Send Message" />
</p:outputPanel>
</h:form>
When Enter key is pressed, first commandButton(with id="startNewChat") is pressed, but I want that second commandButton(with id="submitChatMessage") should be pressed.
What I have tried: accesskey="13", type="submit", id="submit"

Answer 1

I assume that you want to apply this on the second input field, in that case you need to capture the keypress event and invoke the button by JS when the key code is 13.
<form id="form">
...
<p:inputText value="#{bean.newChatMessageFromWeb}" onkeypress="if (event.keyCode == 13) { document.getElementById('form:submitChatMessage').click(); return false; }" />
<p:commandButton id="submitChatMessage" action="#{bean.submitChatMessage}" value="Send Message" />
(note that I added an id to the <h:form> so that the command button gets a fixed ID which is selectable by JS, also note the return false, this will block the default button from getting fired)
A more clean way would be to put each form in its own <h:form>.
<h:form>
<p:inputtext value="#{bean.mobileNumber}" />
<p:commandButton id="startNewChat" value="Chat" action="#{bean.startNewChat}" update=":chatWindow" />
</h:form>
<p:outputPanel id="chatWindow">
<h:form>
<p:inputTextarea readonly="true" value="#{bean.chatMessages}" />
<p:inputText value="#{bean.newChatMessageFromWeb}" />
<p:commandButton id="submitChatMessage" action="#{bean.submitChatMessage}" value="Send Message" />
</h:form>
</p:outputPanel>

Answer 2

It's like that in html. The submit button that comes first in markup is the one activated with enter. Try setting
type="button"
on the first command button, if that doesn't work, you don't have much choice except maybe reordering your buttons and styling them so that one appears before another, or as BalusC said capturing keypresses with js.

Answer 3

If your inputText and submit buttons are inside the same form, put this inside the form
<p:defaultCommand target="yourButtonId" />
the enter key will trigger the button with the target id.
In case of the op's question, just putting that line at the end of the form with the desired button's id as the target would solve the problem.
<h:form>
<p:inputtext value="#{bean.mobileNumber}" />
<p:commandButton id="startNewChat" value="Chat" action="#{bean.startNewChat}" update="chatWindow" />
<br />
<br />
<p:outputPanel id="chatWindow">
<p:inputTextarea readonly="true" value="#{bean.chatMessages}" />
<p:inputText value="#{bean.newChatMessageFromWeb}" />
<p:commandButton id="submitChatMessage" action="#{bean.submitChatMessage}" value="Send Message" />
</p:outputPanel>
<p:defaultCommand target="submitChatMessage" />
</h:form>