1

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) {

1
  • 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, 2013 at 9:46

3 Answers 3

6

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>
0

You can use richfaces' Hotkey. Using your example:

<rich:hotKey selector="#searchButton" key="return">
    <rich:componentControl target="searchButton" operation="click" />
</rich:hotKey>
2
  • i tried but it does not work !! also when press enter (name Detail) button fired not (search) button Dec 16, 2013 at 8:13
  • @YajliMaclo my mistake, enter should be return
    – kolossus
    Dec 16, 2013 at 20:54
-1

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"/>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.