How to update Calculated Column via OnClick function

I have 2 calculated fields (total, calcTotal) which will display the figures once form is saved. How can I make use this columns and automatically display the amount into the text box (totalIf, Amount) respectively once click on the button? The figures should display before user click the save button.

Thank you.

Hello @noorshahida88!

Sharepoint calculated columns only update when an item is created or edited.

As an option, you can add Text Box to display the total on button click. So the user will see totals before save, and calculated column will do the job on save.

Please follow the below steps to develop:

  1. To do so, add the TextBox fields from the Common Fields to the form.

  2. Add the following code to disable fields In the JavaScript Editor, so the user will not be able to fill in totals manually. Replace TextBox1 and TexBox2 with the fields’ internal names.

    fd.spRendered(function() {
    fd.field(‘TextBox1’).disabled = true;
    fd.field(‘TextBox2’).disabled = true;

  3. Add Button to the form, in Button setting in OnClick add the desired formula.

    The example of the formula is below. Replace TextBox and Values with the fields’ internal names.

    fd.field(‘TextBox1’).value = fd.field(‘Value1’).value + fd.field(‘Value2’).value + fd.field(‘Value3’).value;
    fd.field(‘TextBox2’).value = fd.field(‘Value3’).value + fd.field(‘Value4’).value + fd.field(‘Value5’).value;

Thanks @mnikitina, now I can display the amount :smile:

fd.field('TextBox1').value = fd.field('PerformanceLevel').value;
fd.field('TextBox2').value = fd.field('PerformanceLevel2').value;
fd.field('TextBox3').value = fd.field('PerformanceLevel3').value;
fd.field('TextBox4').value = fd.field('PerformanceLevel4').value;
fd.field('TextBox5').value = fd.field('PerformanceLevel5').value;

fd.field('TextBox6').value = fd.field('TextBox1').value + fd.field('TextBox2').value + fd.field('TextBox3').value + fd.field('TextBox4').value + fd.field('TextBox5').value;

var temp = fd.field('TextBox6').value;
var countNotMeetExpectation = (temp.match(/Not Meet Expectation/g) || []).length;

var total = 5 - countNotMeetExpectation;

fd.field('TotalIf').value = total;

function calcAmountAwarded()

var total = fd.field('TotalIf').value;
var amount0or1 = 0;
var amount2or3 = 125;
var amount4 = 150;
var amount5 = 200;

if(total <= 1){
//alert("Allowance amount is RM0.00!");
fd.field('Amount').value = amount0or1;
else if(total == 2 || total == 3){
//alert("Allowance amount is RM125.00!");
fd.field('Amount').value = amount2or3;
else if(total == 4){
//alert("Allowance amount is RM150.00!");
fd.field('Amount').value = amount4;
else if(total == 5){
//alert("Allowance amount is RM200.00!");
fd.field('Amount').value = amount5;


1 Like

how do i call a function on button click?

fd.control('Cancel').click: function() { // cancel is the button name


You need to add code in OnClick setting of the button.



Hi i am able to do this way but i want it in jquery in button click event so that i can create a confirmation dialog for user before they delete and chage status field which i can easily do in jquery but this way i was not able to get the confirmation dialog box. Thank you

Hello @ShantiBhattarai,

I'm sorry, I've missed your post.

You can make a global function and call it on button click.

For this, you need to add the function to the "window" object like below.

window.myFunction = function() {
console.log('myFunction triggerred');

fd.spRendered(function() {



1 Like

Thank you this is what i was looking for.

1 Like