2

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.

2
  • Can you add the code that you currently have? That will help in providing the best answer. Mar 25, 2014 at 15:23
  • One way to get this functionality is using jquery and updating at browser end itself dynamically Mar 25, 2014 at 15:39

2 Answers 2

0

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;}
}
1
  • Thanks! JQuery was the way to go on this one. Got it working nicely! Thanks to all for the help!
    – Dman100
    Mar 26, 2014 at 14:27
1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.