dynamically calculate a total amount using ajax

Question

I have a VF page that allows users to create purchase orders. The user enters the quantity and the unit cost, clicks save and the purchase order is created. I have a new request to dynamically see the total cost on the VF page as the user enters the quantity and show the Total Cost automatically update on the VF page. What would be the best way to do this? It would be a partial page post back and re-calculate as the user is entering the data? Any help is appreciated.

Thanks.

Answer 1

I have achieved this using jQuery in VF page, please find the below code.Add custom validation to check if fields are empty.Hope this helps.

VF Page

<apex:page controller="UpdateFieldValCtlr">
  <apex:includeScript value="{!$Resource.jqry}"/> <!-- Include jQuery file as a static resource- ->
  <script>
       var j$ = jQuery.noConflict();
       j$(document).ready(function(){
           var qval = j$("[id$='qty']").val();
           j$("[id$='qty']").blur(function(){
               var unitCost = j$("[id$='cst']").val();
               var quantity = j$("[id$='qty']").val();
               var totCost = unitCost*quantity;
               j$("[id$='tol']").val(totCost);
           });
       });
  </script>
  <apex:form>
      <apex:pageBlock>
        <apex:pageBlockSection columns="1">
             <apex:pageBlockSectionItem>
              <apex:outputLabel for="cst" value="Unit Cost"></apex:outputLabel>
              <apex:inputText value="{!cost}" id="cst"/>
              </apex:pageBlockSectionItem>
              <apex:pageBlockSectionItem>
              <apex:outputLabel for="qty" value="Quantity"></apex:outputLabel>
              <apex:inputText value="{!quantity}" id="qty"/>
             </apex:pageBlockSectionItem>
              <apex:pageBlockSectionItem>
              <apex:outputLabel for="tol" value="Total Cost"></apex:outputLabel>
              <apex:inputText value="{!total}" id="tol"/>
              </apex:pageBlockSectionItem>
        </apex:pageBlockSection>
      </apex:pageBlock>
  </apex:form>
</apex:page>

Controller

public class UpdateFieldValCtlr{
    public Integer quantity{get;set;}
    public Integer cost{get;set;}
    public Integer total{get;set;}
}

Answer 2

If I were you I've just create action region and button to calculate. Using apex code is in my opinion safest option.

BUT if you really must have it updated after put any new value in one of fields JS/jQuery is best way to achieve that