Specifying default a4j:commandButton when press Enter in JSF form

Question

My JSF form contain
Multiple h:inputText and Multiple a4j:commandButton
Also
I have 2 buttons (search) and (reset)

My need when i press Enter during editing any h:inputText
(search) button will be fired

<h:form id="searchForm" onkeypress="formKeypress();">

    <h:panelGrid columns="4" >

        <h:outputText value="name" />
        <h:panelGroup>
            <h:inputText 
                title="name"
                value="#{myController.name}" >                          
            </h:inputText>
            <a4j:commandButton 
                title="name Detail"
                action="#{myController.nameDetail}" >               
            </a4j:commandButton>
        </h:panelGroup>

        <h:outputText value="city" />
        <h:panelGroup>
            <h:inputText 
                title="city"
                value="#{myController.city}" >                          
            </h:inputText>
            <a4j:commandButton 
                title="name Detail"
                action="#{myController.cityDetail}" >               
            </a4j:commandButton>
        </h:panelGroup>

    </h:panelGrid>


    <h:panelGrid >
        <h:panelGroup>
            <a4j:commandButton
                id="searchButton" 
                value="search" title="search"
                action="#{myController.search}"
                render="searchResultsGrid" />                       
        </h:panelGroup>
    </h:panelGrid>


    <f:verbatim>
        <script type="text/javascript" >
            <!--

            function formKeypress() {
            //  if (event.keyCode == 13) {
            //      document.getElementById('searchForm:searchButton').click();
            //      return false; 
            //  }
            }

            -->
        </script>
    </f:verbatim>       

</h:form>

the problem is that when i press Enter during editing any h:inputText the first a4j:commandButton in the form will be fired Not the (search) button

Note
I checked the answer
Default action to execute when pressing enter in a form
But that for h:commandButton
And I face JavaScript error exception

ReferenceError: event is not defined [Break On This Error] if (event.keyCode == 13) {

Okay, but the CSS trick to swap the buttons in the thread you link to seems like it is a winner and easy to accomplish. — Gimby, Dec 12 '13 at 09:46

McDowell · Accepted Answer · 2013-12-12T19:10:22.940

You have to pass the event to the JavaScript function:

<h:form onkeypress="return formKeypress(event);"
        id="srch">
  <h:inputText />
  <h:commandButton id="no" value="NO!" action="#{bean.no}" />
  <h:commandButton id="yes" value="YES!" action="#{bean.yes}" />
</h:form>
<script type="text/javascript">
  var formKeypress = function(event) {
    if (event.keyCode === 13) {
      document.getElementById('srch:yes').click();
      return false;
    }
    return true;
  };
</script>

kolossus · Answer 2 · 2013-12-16T20:54:10.357

0

You can use richfaces' Hotkey. Using your example:

<rich:hotKey selector="#searchButton" key="return">
    <rich:componentControl target="searchButton" operation="click" />
</rich:hotKey>

edited Dec 16 '13 at 20:54

answered Dec 13 '13 at 14:42

kolossus

20,559
3
52
104

i tried but it does not work !! also when press `enter` (name Detail) button fired not (search) button – Ahmed Nabil Dec 16 '13 at 08:13
@YajliMaclo my mistake, `enter` should be `return` – kolossus Dec 16 '13 at 20:54

score -1 · Answer 3 · answered Mar 12 '15 at 10:11

Use the PrimeFaces component:

<!-- Default button when pressing enter -->
<p:defaultCommand target="submit"/>

Use this in combination with a focus component and you will rock!

<!-- Focus on first field, or first field with error -->
<p:focus context="feesboek"/>

Specifying default a4j:commandButton when press Enter in JSF form

3 Answers3