Q:

OnClick action after actual action in h:commandButton

I have a marketplace application, and in the payment page, there's a h:form with some validations on the fields. I have a h:commandButton to submit the form and perform an action in the back-end.
The code is this:
<div class="form-actions">
<h:commandButton onclick="setTimeout($('#adios').modal('show'),50)" 
value="Pay!" action="#{basketManager.pay(accountManager.currentAccount.username)}"
class="btn btn-primary btn-lg"/> 
</div>

The modal just displays a message. But I want this action to be performed after the h:form validations are correctly met, or even better, after the action inside the h:commandButton (which by the way is not working, it only works if I remove the onClick) 
Any ideas?
EDIT: Thanks to @SRy for his advice, but there's still problems. This is my code now:
<div class="form-actions">
<p:commandButton oncomplete="$('#adios').modal('show')" 
value="Pay!" action="#{basketManager.pay(accountManager.currentAccount.username)}"
styleClass="btn btn-primary btn-lg"/> 
</div>

A:

You Can use Primefaces commandbutton p:commandButton for easy execution or you can do somthing like this
 <h:commandButton 
    value="Pay!" action="#{basketManager.pay(accountManager.currentAccount.username)}"
    class="btn btn-primary btn-lg">
     <f:ajax execute="@this" render="@form" onevent=showdlg();/>
   </h:commandButton>

JavaScript

function showdlg(data){
       if(data.status=='success'){
          setTimeout($('#adios').modal('show'),50);
          }
      }

