function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
tylerotylero 

Sum fields and show total on Visualforce page

I have written a visualforce page for a custom object.  I need to have 3 fields summed together and have the total populate on change of the input values.

The total should calculate on change of any inputField value.  I can get it to work by using...
<script type="text/javascript" name="Real-time Calculation"> 
function calc(A,B,C,SUM) { 
  var one = Number(A); 
  if (isNaN(one)) { alert('Invalid entry: '+A); one=0; } 
  var two = Number(document.getElementById(B).value);  
  if (isNaN(two)) { alert('Invalid entry: '+B); two=0; }
  var three = Number(document.getElementById(C).value);  
  if (isNaN(three)) { alert('Invalid entry: '+C); three=0; }
  document.getElementById(SUM).value = one + two + three; 
} 
</script>
for the script code and...
<input value="{!Pricing__c.Num1__c}" styleClass="masterClass" id="dpd1" onChange="calc(this.value,'dpd2','dpd3','dpdresult')" />
<input value="{!Pricing__c.Num2__c}" styleClass="masterClass" id="dpd2" onchange="calc(this.value,'dpd1','dpd3','dpdresult')" />
<input value="{!Pricing__c.Num3__c}" styleClass="masterClass" id="dpd3" onchange="calc(this.value,'dpd1','dpd2','dpdresult')" />
<output value="{!Pricing__c.NumTotal__c}" id="dpdresult" />
for the visualforce code.

The total will populate on the visualforce page on change of the values for any of the 3 number fields.  The problem is that the values won't save to the record upon saving from the Visualforce page since the fields aren't <apex:inputField /> or <apex:outputField>.  If I change the <input /> fields to <apex:inputField />, then the entered values save to the record but don't populate the total.

How do I get the input values to save to the object fields and calculate the sum of the fields dynamically without saving the record or refreshing the page/section?
Edwin VijayEdwin Vijay
Try the below code. Use Actionfunction and rerender the total outputtext to relfect the new total.
<apex:inputfield value="{!Pricing__c.Num1__c}" styleClass="masterClass" id="dpd1"  />
<apex:inputfield value="{!Pricing__c.Num2__c}" styleClass="masterClass" id="dpd2"/>
<apex:inputfield value="{!Pricing__c.Num3__c}" styleClass="masterClass" id="dpd3" />

<apex:outptutext value="{!Pricing__c.Num1__c + Pricing__c.Num2__c + Pricing__c.Num3__c}" id="dpdresult" />

Forcetree.com : Salesforce Code Samples and Tips (http://www.forcetree.com" target="_blank)
tylerotylero
Thank you for your response.

I am having trouble with the apex:actionFunction component with reRender attribute.  I added...
<apex:actionFunction name="methodDPD" reRender="dpdresult">
</apex:actionFunction>
I renamed the JavaScript name value to "methodDPD" so it would match the apex:actionFunction component name.

All of the examples I have been able to find using the apex:actionFunction component also have an onclick attribue, which my code does not use.  I want to have an onChange action cause the total to calculate.  What's the proper way to include the apex:actionFunction component with reRender attribute to calcualte the total?
Edwin VijayEdwin Vijay
<apex:inputfield value="{!Pricing__c.Num1__c}" styleClass="masterClass" id="dpd1" >
<apex:actionfunction event="onchange" rerender="sumwrapper">
</apex:inputfield>
<apex:inputfield value="{!Pricing__c.Num2__c}" styleClass="masterClass" id="dpd2">
<apex:actionfunction event="onchange" rerender="sumwrapper">
</apex:inputfield>
<apex:inputfield value="{!Pricing__c.Num3__c}" styleClass="masterClass" id="dpd3" >
<apex:actionfunction event="onchange" rerender="sumwrapper">
</apex:inputfield>

<apex:outputpanel id="sumwrapper">
<apex:outptutext value="{!Pricing__c.Num1__c + Pricing__c.Num2__c + Pricing__c.Num3__c}" id="dpdresult" />
</apex:outputpanel>
Try if this one works.

Forcetree.com : Salesforce Code Samples and Tips (http://www.forcetree.com" target="_blank)
tylerotylero
I gave it a try and 'event' is an unsupported attribute of apex:actionFunction.  Any other ideas?
Edwin VijayEdwin Vijay
OOPS! You will have to replace actionFunction with actionSupport
tylerotylero
I tinkered with a few things and I am not seeing the summed value on the page.  Is that an issue with the apex:outputPanel?screenshot of code and page