How to execute an ADF button's action method using javascript

How to execute an ADF button's action method using javascript

http://hazem-adf-tips.blogspot.com/2012/07/how-to-execute-adf-buttons-action.html

Suppose that we have  UI input components that, when the Enter key is pressed, will virtually press a button within a page or page fragment.
Let's assume a page fragment containing an input text component and a command button to press:

    <af:panelFormLayout id="pfl1">
    <f:facet name="footer">
    <af:commandButton text="save" id="cb1" action="#{testBean.buttonAction}"
      clientComponent="true"/>
    </f:facet>
    <af:inputText label="Label 1" id="it1" value="#{testBean.param1}" autoSubmit="true">
    <af:clientListener method="executeButtonMethod" type="keyUp"/>
    </af:inputText>
    </af:panelFormLayout>


The command button is bound to a managed bean action method. By default, the action method is invoked when users press the command button. However, with the JavaScript shown next, this can be simulated and mapped to the Enter key press in the text field.

        <?xml version='1.0' encoding='UTF-8'?>
        <jsp:root xmlns:jsp="/JSP/Page" version="2.1"
        xmlns:af=/adf/faces/rich
        xmlns:f="/jsf/core">
        <af:resource type="javaScript">
        function  executeButtonMethod (event){
        if (event.getKeyCode() == AdfKeyStroke.ENTER_KEY) {
        var inputTextField = event.getSource();
        var button = inputTextField.findComponent('cb1');
        var partialSubmit = true;
        AdfActionEvent.queue(button, partialSubmit);           event.cancel();
                }
        }
        </af:resource>

For JavaScript to work, note the use of the af:clientListener on the input text field and the use of the clientComponent="true" configuration on the button.