CODEWITHSUNDEEP
javaajaxjsfformsjsf-2
Miguel Ping
Miguel Ping

Reputation: 18347

JSF2: Submit AJAX form

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?

Upvotes: 1

Views: 2341

Answers (2)

Miguel Ping
Miguel Ping

Reputation: 18347

I've solved it through jQuery, similar to @mmanco's solution:

$('form input[type=text]').die('keydown').keydown(function(e){
    if(e.keyCode == 13 ) {
        $('form\\:submitButton').click();
        return false;
    }
});

Upvotes: 2

Maxim Manco
Maxim Manco

Reputation: 1944

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();
            }
        }
    }
});

Upvotes: 2

Related Questions