disable button via js

Question

I need to disable button in case the text input value length is less than 3.

I was trying to use js but the button is not disabled its just changing is color

 <p:autoComplete id="ac"
                    value="#{bean.selectedNetCode}" 
                    completeMethod="#{bean.complete}"
                    maxlength="3"
                    size="3"
                    maxResults="10"
                    onkeyup="checkLength(this.value)">
        <p:ajax event="itemSelect" update="genButton" listener="#{bean.handleNetCodeChange}"/>
    </p:autoComplete> 



 function checkLength(value){
      if(value.length <= 2){
      document.getElementById("genButton").disabled = true;
 }

Any idea why ?

Thanks

Answer 1

You can define the attribute widgetVar of p:commandButton, and that will give you access to the component via javascript.

Then, you have some methods at your disposal. From PrimeFaces 3.4 Documentation:

• disable(): Disables button
• enable(): Enables button

---

Example:

<p:autoComplete onkeyup="checkLength(this.value)">/>
<p:commandButton widgetVar="myButton" />

function checkLength(value){
     if(value.length <= 2)
         myButton.disable();
}

---

UPDATE 07/2021:

As pointed by dian jin in the comments, when using PimeFaces 4.0 to 5.0 you will need to call PF('myButton').disable(); to reference widgetVar properly.