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
Preeti Khanna 10Preeti Khanna 10 

Calculate total of two picklist fields on visualforce page

Hi All,

I am stuck on one issue.
We need to calculate total of 3 picklist fieldsfor which user will enter values on visualforce page and total needs to be displayed on visualforce page once user enters value in fields on visualforce page.Kindly help asap.
Prem Anandh 1Prem Anandh 1
Can you please share your code. So I can  check and update the issues
Preeti Khanna 10Preeti Khanna 10
Hi,

I am getting below error while saving page.I need to calculate total on picklist fields update on VF Page without command button-
Error: Incorrect parameter type for function 'Text()'. Expected Number, Date, DateTime, Picklist, received Text.
I tried using numeric values but using numeric vlaues also total is not updaated on VF Page although page is saved.
Please help.Thanks in advance!

<apex:page standardController="FeedbackSurvey__c" extensions="FeedbackCtrlnotouch" showHeader="false">
   <script>
function calculateTotal(aId, bId, cId, tId) {
    var a = document.getElementById(aId).value;
    var b = document.getElementById(bId).value; 
    var c = document.getElementById(cId).value;    
    var t = a+b+c;
   
    document.getElementById(tId).innerHTML = t.toFixed(2);
}
</script>
    <apex:relatedList list="NotesAndAttachments"/>
    <apex:form >
        <apex:pageblock title="Feedback Details"
           <table border="1"> 
           <tr>
                <td width="2%" align="left"></td>
                <td width="10%">Supplies of Consumables</td>
                <td width="8%" align="center">5</td>
                <td> <apex:inputField value="{!feed.Supplies_of_Consumables__c}" id="a" style="width:40px"            required="false"
        onkeyup="calculateTotal('{!$Component.a}', '{!$Component.b}', '{!$Component.c}', '{!$Component.t}')"/> </td>
              </tr>
              <tr>
                <td width="2%" align="left"></td>
                <td width="10%">Customer Service Response</td>
                <td width="8%" align="center">5</td>
           
          
           
        <td> <apex:inputField value="{!feed.Customer_Service_Response__c}" id="b" style="width:40px" required="false"
        onkeyup="calculateTotal('{!$Component.a}', '{!$Component.b}', '{!$Component.c}', '{!$Component.t}')"/> </td>
              
              </tr>
              <tr>
                <td width="2%" align="left"></td>
                <td width="10%">Operator's Hygiene</td>
                <td width="8%" align="center">5</td>
              
               <td><apex:inputField value="{!feed.Operator_Hygiene__c}" id="c" style="width: 200px; height: 35px;"
        onkeyup="calculateTotal('{!$Component.a}', '{!$Component.b}', '{!$Component.c}', '{!$Component.t}')"/></td>
              </tr>
 
             <tr>
               <td width="2%" align="left"></td>
               <td width="10%">TOTAL</td>
    
      
     <td> <apex:outputText id="t" style="width:80px" value="{0, number, 0.00}">
       <apex:param value="{!Value(Text(feed.Supplies_of_Consumables__c)) +VALUE(TEXT(feed.Customer_Service_Response__c)) + VALUE(TEXT(feed.Operator_Hygiene__c)) }"/>
    </apex:outputText></td>
   
   
               </tr>
            </table>
           
        </apex:pageblock>
   
    </apex:form>
</apex:page>
 
Prem Anandh 1Prem Anandh 1
Hi Preeti, 

I have checked with you code and updated for the same

For testing purpose I have created 3 numeric field on Contact object same as your API name
  • Customer_Service_Response__c
  • Operator_Hygiene__c
  • Supplies_of_Consumables__c
Please see below code for updation  
<apex:page standardController="Contact"  showHeader="false">
   <script>
		function calculateTotal() 
		{ 
		    var a = document.getElementById('{!$Component.form.pbId.a}').value.trim().length > 0? document.getElementById('{!$Component.form.pbId.a}').value.trim(): 0 ;
		    var b = document.getElementById('{!$Component.form.pbId.b}').value.trim().length > 0? document.getElementById('{!$Component.form.pbId.b}').value.trim(): 0 ;
		    var c = document.getElementById('{!$Component.form.pbId.c}').value.trim().length > 0? document.getElementById('{!$Component.form.pbId.c}').value.trim(): 0 ;    
		    
		    var t = parseInt(a)+parseInt(b)+parseInt(c);    
		    
    		document.getElementById('{!$Component.form.pbId.t}').innerHTML = t;
		}
	</script>
    
    <apex:relatedList list="NotesAndAttachments"/>
    
    <apex:form id="form">
        <apex:pageblock title="Feedback Details" id="pbId">
           <table border="1"> 
           		<tr>
	                <td width="2%" align="left"></td>
	                <td width="10%">
	                	Supplies of Consumables
	                </td>
	                <td width="8%" align="center">
	                	5
	                </td>
	                <td> 
	                	<apex:inputField value="{!Contact.Supplies_of_Consumables__c}" id="a" style="width:40px" required="false" onkeyup="calculateTotal();"/> 
	                </td>
              	</tr>
              	<tr>
	                <td width="2%" align="left"></td>
	                <td width="10%">
	                	Customer Service Response
	                </td>
	                <td width="8%" align="center">
	                	5
	       	        </td>    
        			<td> 
        				<apex:inputField value="{!Contact.Customer_Service_Response__c}" id="b" style="width:40px" required="false"
        				onkeyup="calculateTotal();"/> 
        			</td>              
              	</tr>
              	<tr>
                	<td width="2%" align="left"></td>
                	<td width="10%">
                		Operator's Hygiene
                	</td>
                	<td width="8%" align="center">
                		5
                	</td>              
               		<td>
               			<apex:inputField value="{!Contact.Operator_Hygiene__c}" id="c" style="width: 40px;"
        				onkeyup="calculateTotal();"/>
        			</td>
              	</tr> 
             	<tr>
               		<td width="2%" align="left"></td>
               		<td width="10%">TOTAL</td>      
     				<td> 
     					<apex:outputText id="t" style="width:80px" value="">
    					</apex:outputText>
    				</td>  
               </tr>
            </table>           
        </apex:pageblock>   
    </apex:form>
</apex:page>

Note: Following are the updates you have to do in your page.
  • Update StandardController Name. 
  • Add your extensions.


Screen-shot:

User-added image

Its working fine for me. Hope it will help for you. Please let me know if need any help.

Thanks,
Prem Anandh