How to avoid repeatedly click a button in a form?

Question

My code:

<h:form id="newBSTypePanel" >
    <h:panelGrid columns="2" id="newRecod" >
        <h:outputText value="Name"/><h:inputText value="#{treeTableController.newBStypeBean.currentObject.TYPENAME.value}" required="true" />
        <p:commandButton value="save" action="#{treeTableController.saveNewNodes}" oncomplete="Dlg.hide()" update="productDataForm"/>
        <p:commandButton value="close" oncomplete="Dlg.hide()" />
    </h:panelGrid>
</h:form>

There is quite a bit of functionality associated with the save action. If I click the button repeatedly, it may save a few records in the database. That's not my wish. How can I prevent multiple clicks and resolve this?

Answer 1

The <p:commandButton>'s Client Side API Widget:

• PrimeFaces.widget.CommandButton

• Method Params Return Type Description

• disable() - void Disables button

• enable() - void Enables button

So you can just use like this:

<p:commandButton widgetVar="saveButton"
                 onclick="saveButton.disable()"
                 value="save"
                 action="#{treeTableController.saveNewNodes}" 
                 oncomplete="saveButton.enable();Dlg.hide()"
                 update="productDataForm"/>

Answer 2

For the newer versions of PrimeFaces, the solution would be:

 <p:commandButton widgetVar="saveButton"
                 onclick="PF('saveButton').disable()"
                 value="save"
                 action="#{treeTableController.saveNewNodes}" 
                 oncomplete="PF('saveButton').enable();PF('Dlg').hide()"
                 update="productDataForm"/>

Answer 3

Use Javascript and Timer

<script>

function disableClick(){
   document.getElementById('saveButton').disables = true;
   setTimeout('document.getElementById(\'saveButton\').disables = false', 5000)"
}
</script>


 <h:form id="newBSTypePanel" >
    <h:panelGrid columns="2" id="newRecod" >
        <h:outputText value="Name"/><h:inputText value="#{treeTableController.newBStypeBean.currentObject.TYPENAME.value}" required="true" />
        <p:commandButton value="save" action="#{treeTableController.saveNewNodes}" oncomplete="Dlg.hide()" onclick="disableClick()" id="saveButton" update="productDataForm"/>
        <p:commandButton value="close" oncomplete="Dlg.hide()" />
    </h:panelGrid>
</h:form>