function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Gajanan KadamGajanan Kadam 

How to calculate sum of two number by using VF page And JavaScript

Can someone help me out to calculate the sum of VF page by using JS. I am trying with below code but not getting result when i enter numbers.

<apex:page > 
 <script>
        function myFunction() {
          var y = document.getElementById("{!$Component.num1}").value;
          console.log(y);
          var z = document.getElementById("{!$Component.num1}").value;
          console.log(z);
          var x = +y + +z;
          console.log(x);
          document.getElementById("{!$Component.demo}").innerHTML = x;
        }
    </script>
     <apex:form id="form">
         <apex:pageBlock >
             <apex:inputText id="num1" label="Number1" onchange="myFunction()"/>
             <apex:inputText id="num2" label="Number2" onchange="myFunction()"/>
         </apex:pageBlock>
         <apex:pageBlock >
             <apex:pageBlockSection id="demo"></apex:pageBlockSection>
         </apex:pageBlock>       
     </apex:form>
</apex:page>
Best Answer chosen by Gajanan Kadam
kailash chandrakailash chandra
Each component in a Visualforce page has its own Id attribute. When the page is rendered, this attribute is used to generate the Document Object Model (DOM) ID. Use $Component.Path.to.Id in JavaScript to reference a specific component on a page, where Path.to.Id is a component hierarchy specifier for the component being referenced. 
<apex:page > 
 <script>
        function myFunction() {
          var y = parseFloat(document.getElementById("{!$Component.form.myblock.num1}").value);
          console.log(y);
          var z = parseFloat(document.getElementById("{!$Component.form.myblock.num2}").value);
          console.log(z);
          if (!isNaN(y) && !isNaN(z)){
              var x = y + z;
              console.log(x);
              document.getElementById("{!$Component.form.outblock.demo}").innerHTML = x.toFixed(2);
          }
          
        }
    </script>
     <apex:form id="form">
         <apex:pageBlock id="myblock">
             <apex:inputText id="num1" onchange="myFunction()">
                 <apex:outputLabel > Number1</apex:outputLabel>
             </apex:inputText>
             <apex:inputText id="num2" onchange="myFunction()">
                 <apex:outputLabel > Number2</apex:outputLabel>
             </apex:inputText>             
         </apex:pageBlock>
         <apex:pageBlock id="outblock" >
              <apex:outputLabel > Sum : </apex:outputLabel>
             <apex:pageBlockSection id="demo"></apex:pageBlockSection>
         </apex:pageBlock>       
     </apex:form>
</apex:page>

OUTPUT : -

User-added image


I hope this will help you.

Kindly mark this as solved if the reply was helpful.

Thanks,
Kailash Chandra

All Answers

NagendraNagendra (Salesforce Developers) 
Hi Kadam,

Sorry for this issue you are facing.

May I suggest you please give a try by using below code which works fine for me. 
<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>
Please let us know if this helps.

Kindly mark this as solved if the reply was helpful.

Thanks,
Nagendra
 
Ajay K DubediAjay K Dubedi
Hi Gajanan,
Please try the below code and let me know if this works for you. If still need modifications do let me know.
  
<apex:page > 
 <script>
        function myFunction() {
          var y = document.getElementById("{!$Component.form.pblock.num1}").value;
          console.log(y);
          var z = document.getElementById("{!$Component.form.pblock.num2}").value;
          console.log(z);
          var x = +y + +z;
          console.log(x);
          document.getElementById("{!$Component.form.pblock1.demo}").innerHTML = x;
        }
    </script>
     <apex:form id="form">
         <apex:pageBlock id="pblock">
             <apex:inputText id="num1" label="Number1" onchange="myFunction()"/>
             <apex:inputText id="num2" label="Number2" onchange="myFunction()"/>
         </apex:pageBlock>
         <apex:pageBlock id="pblock1">
             <apex:pageBlockSection id="demo"></apex:pageBlockSection>
         </apex:pageBlock>       
     </apex:form>
</apex:page>


I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.
Thanks,
Ajay Dubedi
kailash chandrakailash chandra
Each component in a Visualforce page has its own Id attribute. When the page is rendered, this attribute is used to generate the Document Object Model (DOM) ID. Use $Component.Path.to.Id in JavaScript to reference a specific component on a page, where Path.to.Id is a component hierarchy specifier for the component being referenced. 
<apex:page > 
 <script>
        function myFunction() {
          var y = parseFloat(document.getElementById("{!$Component.form.myblock.num1}").value);
          console.log(y);
          var z = parseFloat(document.getElementById("{!$Component.form.myblock.num2}").value);
          console.log(z);
          if (!isNaN(y) && !isNaN(z)){
              var x = y + z;
              console.log(x);
              document.getElementById("{!$Component.form.outblock.demo}").innerHTML = x.toFixed(2);
          }
          
        }
    </script>
     <apex:form id="form">
         <apex:pageBlock id="myblock">
             <apex:inputText id="num1" onchange="myFunction()">
                 <apex:outputLabel > Number1</apex:outputLabel>
             </apex:inputText>
             <apex:inputText id="num2" onchange="myFunction()">
                 <apex:outputLabel > Number2</apex:outputLabel>
             </apex:inputText>             
         </apex:pageBlock>
         <apex:pageBlock id="outblock" >
              <apex:outputLabel > Sum : </apex:outputLabel>
             <apex:pageBlockSection id="demo"></apex:pageBlockSection>
         </apex:pageBlock>       
     </apex:form>
</apex:page>

OUTPUT : -

User-added image


I hope this will help you.

Kindly mark this as solved if the reply was helpful.

Thanks,
Kailash Chandra
This was selected as the best answer
Gajanan KadamGajanan Kadam
Thanks Kailash !! This work for me :)