title: How to calculate two input form fields and put the value in another without submitting the form using jquery with JSF
body: <p>I have three fields called quantity, rate and total amount. whenever i enter rate and quantity field, both values should multiply and displayed in total amount column without refreshing the page. for this, i used jquery but not getting output. where i did the mistake and what is the root cause....</p>
  
  <p>This is my JSF page</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"&gt;
  
  &lt;h:head&gt;
      &lt;title&gt;ACIM&lt;/title&gt;
      &lt;meta http-equiv="content-type" content="text/html; charset=utf-8" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="../css/global.css" /&gt;
      &lt;h:outputScript library="primefaces" name="jquery/jquery.js"
          target="head" /&gt;
      &lt;h:outputScript target="head"&gt;
       $ = jQuery;
              $(document).ready(function(){
          $(".input").keyup(function(){
                var val1 = +$("#myForm\\:quantity").val();
                var val2 = +$("#myForm\\:rate").val();
                $("#myForm\\:totalAmount").val(val1+val2);
           }); 
      });
      &lt;/h:outputScript&gt;
  &lt;/h:head&gt;
  &lt;h:body&gt;
  
      &lt;h:form id="myForm"&gt;
          &lt;h:panelGrid columns="4" cellpadding="5"&gt;
  
              &lt;h:outputText value="Quantity: " /&gt;
              &lt;h:inputText id="quantity" value="#{myBean.quantity}"&gt;
              &lt;/h:inputText&gt;
  
              &lt;h:outputText value="rate" /&gt;
              &lt;h:inputText id="rate" value="#{myBean.rate}"&gt;
              &lt;/h:inputText&gt;
  
              &lt;h:outputText value="totalAmount " /&gt;
              &lt;h:inputText id="totalAmount" value="#{myBean.totalAmount}"
                  disabled="true"&gt;
              &lt;/h:inputText&gt;
          &lt;/h:panelGrid&gt;
      &lt;/h:form&gt;
  &lt;/h:body&gt;
  &lt;/html&gt;
  </code></pre>