CODEWITHSUNDEEP
jsf-2primefaces
user517491
user517491

Reputation:

Setting OK(submit) button in JSF 2.0

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"

Upvotes: 4

Views: 5945

Answers (3)

Alireza Jamali
Alireza Jamali

Reputation: 317

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>

Upvotes: 0

soulcheck
soulcheck

Reputation: 36767

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.

Upvotes: 1

BalusC
BalusC

Reputation: 1108712

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>

Upvotes: 9

Related Questions