title: Javascript calculator in JSF view calling server side
body: <p>I need to make a calculator in a jsf view using only client-side part. No data can be passed to server-side.</p>
  
  <p>I have the view splitted in a couple of <code>&lt;h:form&gt;</code> with calculator in the middle:</p>
  
  <pre><code>&lt;h:form id="customer_form"&gt;
  // view here working nice
  &lt;/h:form&gt;                   
  
  &lt;h:panelGroup layout="block" styleClass="ui-grid-col-2 offset-boxes" &gt;
  
      &lt;p:panel id="calculator" header="Calculadora" styleClass="half-screen-height calculator-table"&gt;
  
          &lt;h:inputText id="result" widgetVar="result" styleClass="result-text"/&gt;
          &lt;p:button value="X" widgetVar="X" ajax="false" onclick="calculate('x')" styleClass="right"&gt;&lt;/p:button&gt;
  
          // more calculator buttons   
  
      &lt;/p:panel&gt;
  
  &lt;/h:panelGroup&gt;
  
  &lt;h:form id="consumption_form"&gt;
  // view here working nice
  &lt;/h:form&gt;                   
  </code></pre>
  
  <p>Until here all is ok, but when I try to manage calculator with <code>javascript</code>:  </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      function calculate(sel){
          if (sel == "x") {
              document.getElementById("result").value = "";
          } else {
              var input = document.getElementById("result").value;
              document.getElementById("result").setAttribute("value", input + sel);
          }                   
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>Each time i change <code>result</code> value, server-side is called and value is reset to original <code>value</code>.</p>
  
  <p><strong><em>EDIT</em></strong> according to PrimeFaces documentation of <code>p:button::onclick</code> event </p>
  
  <blockquote>
    <p>Client side callback to execute when button is clicked.</p>
  </blockquote>
  
  <p>Either <code>&lt;h:button&gt;</code> tag is acting like this, so I guess problem is the way <code>JSF</code> or <code>PrimeFaces</code> are handling the javascript event...</p>
  
  <p><em>I also tried to call and set input value by <code>jquery</code> with <code>$("result").value</code> but the result i get is a <code>function(b7)</code> not the value itself.</em></p>
  
  <p>What am I doing wrong?</p>
  
  <p>Thanks! ;)</p>
  
  <p>J</p>