JSF2: Submit AJAX form

Question

I have a page that has a table list through AJAX pagination, all custom. Pagination is working properly, but the Enter key clears the form input's values instead of submitting. My submit button makes an AJAX post that causes the table to reexecute and rerender.

How can I make sure that all form inputs handle the Enter button and submit the AJAX form?

This is my submit button:

<f:ajax execute="@form" render=":formlistproposta" onevent="showProgress">
  <h:commandLink styleClass="link" value="#{msg.menu_search_top_all}"    
                 actionListener="#{propostaBean.search}" onclick="clearForm();">
  </h:commandLink>
</f:ajax>

How can I make sure that whenever I press the Enter key on any of the form's input my AJAX for will be submitted?

Answer 1

First of all the behavior you describe is correct. In a simple HTML page when pressing on the Enter key inside a form the first button will be picked up and clicked. In your case probably an <input type="reset"/> button is the first in the form.

I've used prototype to achieve this.

Here is an example of the script that will handle form submission when the Enter key is pressed:

var FormSubmissionHandler = Class.create({
    initialize: function(formId, submitterId) {
        this.form = $(formId);
        this.submitter = $(submitterId);
        Event.observe(this.form, 'keypress', this.onKeyPress.bindAsEventListener(this));
    },

    onKeyPress: function(event) {
        var code = event.keyCode;
        var element = Event.element(event);
        if(code == Event.KEY_RETURN) {
            var nodeName = element.nodeName;
            var isSelect = nodeName == 'SELECT';
            var isTextArea = nodeName == 'TEXTAREA';

            if(!isSelect && !isTextArea) {
                Event.stop(event);
                this.submitter.click();
            }
        }
    }
});