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
pmishpmish 

Sum of two inputfield values in Visualforce Page and showing it in the third field. All the fields to be saved to object record.

Hi,

I have three fields in my VF page and user has to input two of them manually. Once both the values are entered, I need to show the Sum of both the entered values dynamically on the screen and that value must be saved to the third variable.

<apex:inputField value="{!Employee_segment_ineligible_under_plan__c}" id="eng" style="width:80%"></apex:inputField>

<apex:inputField value="{!Individual_income_reported_via_IRS__c}" id="enf" style="width:80%"></apex:inputField>

The sum should be displayed dynamically something like this and displayed without page being refreshed:

Based on your answers, the calculated subtotal is  __<calculated field>__ employees.

Please Help.

Thanks!!
Prady01Prady01
Hi there,  This once again can be done in two ways one using JS or using Apex but you still will have to use jquery or JS to update the DOM. Similar post was answered you can refer the below link.

https://dfc-org-production.force.com/forums/ForumsMain?id=9060G000000Ua6zQAC

Thank you
Prady01
Shruti SShruti S
+1 Prady
You can use JavaScript and jQuery to calculate the sum of the two fields and use the help of onchange method and populate into the third field.
Here is the code - 
<apex:page id="page" standardController="Employee__c">
    <apex:form id="form">
        <apex:pageBlock id="pgblk" mode="edit" title="Employee Edit">
            <apex:pageBlockSection id="pgblksec" title="Information" columns="2">
                <apex:inputField value="{!Employee__c.Employee_Segment_Ineligible_Under_Plan__c}" onchange="calculatedSubtotal()" id="employeeSIUP" style="width:80%"></apex:inputField>
                <apex:inputField value="{!Employee__c.Individual_Income_Reported_Via_IRS__c}" onchange="calculatedSubtotal()" id="individualIRVI" style="width:80%"></apex:inputField>
                <apex:inputField value="{!Employee__c.Calculated_Subtotal__c}" id="calTotal" style="width:80%"></apex:inputField>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
    
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script type="text/javascript">
        var calculatedSubtotal = function() {
            $( "[id*='calTotal']" ).attr( "readonly", "true" );
            
            var empSIUPVal  = $( "[id*='employeeSIUP']" ).val();
            var indvIRVI    = $( "[id*='individualIRVI']" ).val();
            
            var total = parseFloat( empSIUPVal ) + parseFloat( indvIRVI );
            if( !isNaN( total ) ) {
                $( "[id*='calTotal']" ).val( total );
            }
        };
        
        calculatedSubtotal();
    </script>
</apex:page>
atul patil 7atul patil 7
Add onchange attribute on input field and call javascript method, In that method get values from two input fields and set it to 3rd input field
<apex:page Controller="DemoController">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script>
        var calculate = function() {
            var val1 = $('[id$=input1]').val();
            var val2 = $('[id$=input2]').val();
           
            var total = parseFloat( val1 ) + parseFloat( val2 );
            //The isNaN() function determines whether a value is an illegal number (Not-a-Number)
            if( !isNaN( total ) ) {
                $( "[id$=result]" ).val( total );
            }
        };
    </script>
    <apex:form id="form">
        
       First value: <apex:inputField id="input1"  value="{!opp.AtulsPlayGround__InputVal1__c}" onchange="calculate()" label="First value"/><br/><br/>
       Second value:<apex:inputField id="input2"  value="{!opp.AtulsPlayGround__InputVal2__c}" onchange="calculate()" label="Second value"/><br/><br/>
	   Result:<apex:inputField id="result"  value="{!opp.AtulsPlayGround__Result__c}" label="Result"/>
           
    </apex:form>
</apex:page>
 
public class DemoController {
    public Opportunity opp{get;set;}
}

Thanks,
Atul Patil
Salesforce Developer
http://www.zen4orce.com
amol salveamol salve
Hello Pmish,


Use Javascript to add two number dynamically on change , To save that value in object you need action function which pass that value from javascript to controller and then create on method which will insert object with that sum of two values



<apex:page controller="SaveRecordController" >    
    <script>
        function myFunction() {
          var y = document.getElementById("txt1").value;
          var z = document.getElementById("txt2").value;
          var x = +y + +z;
          document.getElementById("demo").innerHTML = x;
          sumOfvalue(x); 
        }
    </script>
    <apex:form id="form">       
        <p>
          Enter first number:
          <apex:inputfield id="txt1" name="text1" onchange="myFunction();"/>
          Enter second number:
          <apex:inputfield id="txt2" name="text2" onchange="myFunction();"/>
        </p>
        <p id="demo"></p>
    <apex:actionFunction name="sumOfvalue" action="{!saveRecord}">
            <apex:param name="x" value="x" assignTo="{!sumOf}" /> 
     </apex:actionFunction>
</apex:form>
</apex:page>
-------------------------------------------------------------------------------------------------
public class SaveRecordController{
       public integer sumOf{get;set;}
       public void saveRecord(){

              Sum__c sumObj = new Sum__c();
              sumObj .sumOfValue__c =  sumOf;
              insert sumObj;
       }
}

Thanks,
Amol b Salve
Salesforce Developer
http://www.zen4orce.com