How to invoke a p:commandButton by JavaScript on enter keypress?

Question

I have write a and a in my page. When enter key was pressed ,I want to do any js check, if success post an action.

Javascript：

function text_onkeypress() {
    if(event.keyCode==13){
        formSubmit();
    }
}

HTML:

<p:inputText id="context" value="#{bean.fileName}"
 onkeydown="text_onkeypress();"></p:inputText>
<p:commandButton id="search" value="submit" onclick="return formSubmit();" 
 action="#{action.getResult}" ></p:commandButton>

when I write query("#search")[0].click() in the javascript.It can do the check, but can't do action="#{action.getResult}".

I don't know how to do the losted action.

Answer 1

The easiest way for you to submit your form from Javascript is to just invoke the click() event for the jQuery object of the <p:commandButton> .

Most of the Primefaces components can be accessed from Javascript by declaring the widgetVar attribute. This attribute creates a Javascript variable. Eg.

<p:commandButton id="search" value="submit" onclick="return formSubmit();" action="#{action.getResult}" widgetVar="searchClientVar" />

I can now access the variable in the formSubmit function. This Javascript variable has an attribute called jq which references the underlying jQuery object and what you can use to invoke the click event.

function text_onkeypress() {
  if(event.keyCode==13) {
    searchClientVar.jq.click();
  }
}

This will invoke the server side action of the commandButton and submit the form values if they pass validation.

Answer 2

What kind of checks do you need?

You don't need to manually submit on enter(especially when you have just one form). If you want to submit the form only if the user enters something you could take advantage of validateLength tag.

<h:outputLabel for="firstname" value="Firstname: *" />  
        <p:inputText id="firstname"   
                value="#{personBean.firstname}"   
                required="true" requiredMessage="You have to enter your name" label="Firstname">  
            <f:validateLength minimum="2" />  
        </p:inputText>  
        <p:message for="firstname" />

See here a demo: http://www.primefaces.org/showcase-labs/ui/pprAjaxStatusScript.jsf

PS:What PF version do you use?