Question

I have a primefaces input text area and a primefaces button. I want the button to be enabled only when there is any value entered in the text area.

<p:inputTextarea id="dumpnotes" rows="10" cols="90" value="#{postProcessedDump.keyedinContent}" style="color: #000000" styleClass="inputarea" />
<p:commandButton value="Save" actionListener="#{dumpController.saveDumpNotesContent}" update="dumpnotes" oncomplete="PF('dumpNotesSaveSuccessDialog').show();"/>

Answer 1

<p:inputTextarea id="dumpnotes" rows="10" cols="90" value="#{postProcessedDump.keyedinContent}" style="color: #000000" styleClass="inputarea">
     <p:ajax event="keyup" update="saveButton" />
</p:inputTextarea>
<p:commandButton id="saveButton" value="Save" actionListener="#{dumpController.saveDumpNotesContent}" update="dumpnotes" oncomplete="PF('dumpNotesSaveSuccessDialog').show();" disabled="#{empty postProcessedDump.keyedinContent}" />

Edit (based on your comment):

Try to add global="false" to not trigger ajaxStatus <p:ajax event="keyup" global="false" update="saveButton" />. Depending on your PrimeFaces version, you may need to strip out the event name and only write <p:ajax global="false" update="saveButton" />

Answer 2

The questions seems to be rather JavaScript related so I would try the following approach.

First I would define a JavaScript function which checks whether to enable the commandButton or not:

function validateInput() {
    if(document.getElementById('dumpnotes').value == '') {
        document.getElementById('button').disabled = true;
    } else {
        document.getElementById('button').disabled = false;
    }
}

So you just have to give commandButton a id (e.g. id="button") and use onkeyup event at inputTextarea like this:

<p:inputTextarea id="dumpnotes" onkeyup="validateInput()" ... />

I hope this is what you were looking for.

Primefaces make button enable on entering text

2 个答案: