how to reference Calculated Virtual Field Value in Javascript

[Elderberg]

Please bear with me as i try to unfold this.

I have a submission datapage with a Virtual Field  (Virtual23) where as a Calculated Field i'm using a SELECT statement to fetch what I need correctly.  This is successful.

Where i'm struggling is how to reference this value in javascript.   I'm trying to store the value in a varable ...

I've tried this: 

var  x = document.getElementById("cbParamVirtual23").value;

and it doesn't seem to work.  I'm assuming the value fetched by the SELECT statement should return a string.

I've tried the below code to test if it works, but it fails. 

document.getElementById("ElderbergHTMLBlock1").innerHTML = x;
document.getElementById("ElderbergHTMLBlock1").innerHTML = x.toString();
 

 

[Elderberg]

hmm, I think my code is running before the calculated field executes based on some tests I did.   Is there a way to wait until Virtual Fields are calculated?  

I tried this unsuccessfully:

document.addEventListener('DataPageReady', function (event) {

 });

[Elderberg]

Solution Involves 2 Parts:

Part 1:  You need to use setTimeout() method to delay the code such that it runs AFTER the calculated fields get computed.  See https://www.w3schools.com/jsref/met_win_settimeout.asp 

 

Part 2:  You need to reference calculated fields using the document.getElementsByName with index 0  instead of by ID, this is because caspio adds some alphanumeric codes after the Virtual Parameters ID when its set to a Calculated Field.

See Code:
var x = document.getElementsByName("cbParamVirtual27")[0].value;
document.getElementById("ElderbergHTMLBlock1").innerHTML = x;

[AveEd]

Please please provide a full code example.

[Wikiwi]

Another solution would be to use a an OnChange event so when your virtual field changes value then your JS function will detect that event and execute your functon https://www.w3schools.com/jsref/event_onchange.asp

[GoodBoy]

Hi! Another solution that I implemented to reference the value of a calculated value is by using a calculated field instead. Then, I added a new virtual field and set it as hidden to receive the value of calculated field 1.

After that, I used the ID of Virtual 1 to get the value of my calculated field.

var calc = document.getElementById("cbParamVirtual1").value;

I know this is not the best way but it does the job in getting the value of calculated field.

[AveEd]

That you for the quick reply!!! What about the other way around. Virtual to Calculated?

[Kurumi]

Hi @AveEd - In the Calculated Field, you can use the Field Picker and select the Virtual Field. For more information, you can check it here: https://howto.caspio.com/datapages/reports/advanced-reporting/calculations-in-forms-and-reports/

[AveEd]

On 7/15/2022 at 7:29 PM, Meekeee said:

Hi @AveEd - In the Calculated Field, you can use the Field Picker and select the Virtual Field. For more information, you can check it here: https://howto.caspio.com/datapages/reports/advanced-reporting/calculations-in-forms-and-reports/

Can you provide a screenshot of the "field picker" where we can get virtual values to be used in calculated please?

[Kurumi]

Hi @AveEd - here's the Field Picker 

[Kronos]

Hi, just adding to this thread.

Here is an article that contains useful functions that you can use in your calculated field:

Function Reference