JSF CommandButton OnClick, как изменить значение кнопки

Question

У меня есть кнопка со значением «Добавить».Мне нужно, чтобы он щелкнул, значение изменится, чтобы обновить и очистить текст, поданный рядом.

введите описание изображения здесь

<h:head>
  <script type="text/javascript" >
    function changeText(){
           alert('Hi');
           }
</script >
    <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1" http-equiv="X-UA-Conpatible" />
    <h:outputStylesheet library="css" name="bootstrap.min.css" />     
    <title>Products</title>
    <style type="text/css">
        .tableUpdated {
            width: 90% !important;
            margin: 17px 58px 0 !important;
        }
        .btnSpace {
            margin: 17px;
        }     
    </style>
</h:head>
<h:body>
    <center><h2><h:outputText value="Products List"/></h2></center>
        <p>Welcome #{login.user}</p>

       <h:column>
            <f:facet name="header">Quantity</f:facet>
            <h:inputText id="quantity-id" value="#{product.quantity}"  >
               </h:inputText>
        </h:column>
       <h:column>
             <f:facet name="header"> </f:facet>  
            <h:commandButton action="#{Products.addToBag(product.pname,product.pimg,product.pprice,product.quantity,login.user)}" value="Add"   onclick="changeText()" class="btn btn-primary" /> 
        </h:column>  
<h:commandLink action="#{login.logout}" value="Logout"></h:commandLink>
    </h:form>
</h:body>
</html>

Пожалуйста, помогите Спасибо Сара