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 

Real time or dynamic calculation of field value based in visual force page

I have a requirement where in I have table with 6 fields. The first 5 fields are picklist and sixth one needs to be calculated and should contain the result.

Now ,the user can select any values from each of the 5 picklists and based on the selection of values from the picklist , I will need to perform some numeric calculation and display the numerica value in the 6th field on the fly.


Currently my sixth field is a formula field , but the issue is , that formula field calculates and displays only after clicking on the save; Whereas my requirement is that the user  can see the change in the value of the 6th field on the fly as and when the user selects or changes the value in any of the first 5 picklist fields.



Please help!

Any complete sample code or javascript is appreciated. Thank you!





instead of formula field, the other option is to create workflow and do the field update everytime record is created and edited.

That's the problem statement. I need  a solution which is dynamic, ie. the user does can see the change in the VF page without hitting save. The Workflow or Formula field does not serve the purpose as these are calculated only on DB operations and not on the fly.

You can find the below sample code. This might help you.

VF Page:
<apex:page controller="selectlistJSController1">
&lt;script language="javascript">
function itschanged(){
var selval1 = document.getElementById('{!$Component.dfrm.thelist}').value;
var selval2 = document.getElementById('{!$Component.dfrm.thelist1}').value;
var selval3 = document.getElementById('{!$Component.dfrm.thelist2}').value;
var selvaltext = document.getElementById('{!$Component.dfrm.thetext}').value;

if(selval1 == 'NA')
selval1 = '0';
if(selval2 == 'NA')
selval2 = '0';
if(selval3 == 'NA')
selval3 = '0';

document.getElementById('{!$Component.dfrm.thetext}').value = Number(selval1) + Number(selval2) + Number(selval3);
<apex:form id="dfrm" >
<apex:outputLabel value="Select first number"/>
<apex:selectList value="{!selectedvalues}" multiselect="false" onchange="itschanged();" id="thelist" size="1">
<apex:selectOptions value="{!items}"/>

<apex:outputLabel value="Select second number"/>
<apex:selectList value="{!selectedvalues1}" multiselect="false" onchange="itschanged();" id="thelist1" size="1">
<apex:selectOptions value="{!items}"/>

<apex:outputLabel value="Select third number"/>
<apex:selectList value="{!selectedvalues2}" multiselect="false" onchange="itschanged();" id="thelist2" size="1">
<apex:selectOptions value="{!items}"/>

<apex:outputLabel value="Final Result"/>
<apex:inputText value="{!newresult}" id="thetext"/>


Class :
public class selectlistJSController1 {
//String[] countries = new String[]{};

public string selectedvalues {get; set;}
public string selectedvalues1 {get; set;}
public string selectedvalues2 {get; set;}
public string newresult {get;set;}

public List<SelectOption> getItems() {
List<SelectOption> options = new List<SelectOption>();
options.add(new SelectOption('NA','Select Any Number'));
options.add(new SelectOption('1','1'));
options.add(new SelectOption('2','2'));
options.add(new SelectOption('3','3'));
options.add(new SelectOption('4','4'));
options.add(new SelectOption('5','5'));
options.add(new SelectOption('6','6'));
options.add(new SelectOption('7','7'));
options.add(new SelectOption('8','8'));
options.add(new SelectOption('9','9'));
options.add(new SelectOption('10','10'));

return options;


Please let me know if anything more needed.


Thanks Jodendra. But can you please tell me how do I display the final result in VF that is calculated in the script.

Pls help. Thank you!

I have a VF Table that builds rows based on a multi-select picklist. Within these rows I have a picklist with percentages (10% to 100%). When the user chooses the percentage and hits save, this calculates as percentage X total expense amount and displays in the column next to it. 

What I would like is to have a Validation Rule that doesn't allow the user to save unless the percentages in each row all add up 100%. Also, I would like the Split Amount (the column to the right of the Percentages) to display dynamically, IE as they choose the percentage. 

The problem is, I can't figure out how to SUM the percentage field since it's a REPEAT column. Has anyone figured out how to do this?

The validation rule I tried is:
CASE((Allocation__c),"10%",0.10,"20%",0.20,"30%",0.30,"40%",0.40,"50%",0.50,"60%",0.60,"70%", 0.70,"80%",0.80,"90%",0.90,"100%",1.00,null)  != 100.

This only checks the top row, not every row. Any help would be great!