Accessing value of Calculated Field within javascript

[BillW]

Hi,

I have an application where I wish to set the background color of a field to red when a measured value is found to be greater than an allowed tolerance.  The allowed tolerance is extracted from a lookup table using a calculated field.  This calculated value is calculated before the measurement is entered.  For example, in the Submission datapage shown below a Job No is first selected, then a Motor RPM value is obtained from one lookup table and the Tolerance = 0.003 is obtained as a calculated value from another lookup table.  The User then enters a value for Fan.  This all works fine; however, the code that reads the calculated value for Tolerance does not.  See below......

The calculated field is shown below. 

HTML block 3 is used to set the background color when Fan > Tolerance.  The HTML block is positioned following the fields shown above.  The field labeled Fan is ODE_Fan_TIR.  The field labeled Tolerance is ODE_Labyrinth_Tol.  Since Fan > Tolerance the background color of the Fan field should be red.  

In the script shown below, a console error indicates that the calculated field value (Tol) is null.  The error occurs in the following line of code " let tol = document.getElementById("InsertRecordODE_Labyrinth_Tol").value;"

How does one obtain and use a calculated value in an IF statement before the Submit button is pressed?

[Vitalikssssss]

Hi @BillW,

There is a small error in this part of your code.

There is no "value" attribute available for element Calculated value because value is rendered within a <span> tags.

You would need to use "InnerHTML" property to get the text value of Calculated field.

So, above line of code should look like this:

let fan = document.getElementById("InsertRecordODE_Fan_TIR").innerHTML;

Hope this helps.

Regards,

Vitalikssssss

[BillW]

Hi Vitalikssssss,

The field with ID "ODE_Labyrinth_Tol" is the calculated field.  Did you mean to say that this code:   let tol = document.getElementById("InsertRecordODE_Labyrinth_Tol").value;

should be rewritten as   let tol = document.getElementById("InsertRecordODE_Labyrinth_Tol").innerHTML;? 

Regardless, I still receive the same console error message stating cannot read null.  Please see below

   

 

[CoopperBackpack]

Hello @BillW,

Please try the following code to get the value of the ODE_Labyrinth_Tol field:

let tol = document.querySelector('div input[id^="InsertRecordODE_Labyrinth_Tol"]').value;

Also, the "style. backgroundColor" property may be overridden with the basic CSS styles on the DataPage.

If so, you may try to apply the color to the background property:

document.getElementById("InsertRecordODE_Fan_TIR").style.background = 'red';

Feel free to write back if you have questions.

[BillW]

Hi CoopperBackpack,

Thank you for the quick response.  Your solution for accessing the value for ODE_labyrinth_Tol is "spot on".

However, neither of our solutions for changing background color works.  I tried ".backgroundColor" and ".background".  This is confusing as I've done what I thought was exactly the same thing to change background color of a numeric field in another submission form. 

The only difference I can discern is that ODE_Fan_TIR is the 'change' listened for in the addEventListener statement.

Updated Code:

I inserted an alert within the IF statement to make sure the subtraction was performed properly, then entered a value of fan = 0.004 with tolerance = 0.002.  The alert was activated properly; however, I receive no console error nor did the background color change to 'red'.

The updated code is shown below:

[BillW]

Hi Again,

FYI,

I've also tried setting an anchor and using this to set the background color.  By using the three combinations below and the one shown in the current code, I can dance all around the field, and change background color, but cannot figure out how to change the background color of the field itself.

isi.parentNode.parentNode.

isi.parentNode.nextSibling.

isi.parentNode.previousSibling.

[Vitalikssssss]

Hi @BillW,

Please share with us a package of your DP with dependencies. No data required.

I will take a closer look at the settings you have applied.

Regards,

vitalikssssss

[BillW]

Hi again,

I apologize for not getting back to you.  I was working on another portion of coding and forgot all about this issue.  

The DP datapage URL: https://c0dci914.caspio.com/dp/98d580004b58a064986e45ef852b

Authentication: none

Login Support: enabled for one week starting 8/21/2020, 7:30AM EST

Dependencies: 

1) Select 'R49' from the Job No dropdown

2) enter '0.004' into the Fan field

Thank you,

Bill

[MarkMayhrai]

HI BIllW, I like your menu, can you share the code for this?

[Kurumi]

Hi @MarkMayhrai - you may also check this tabbed navigation:
https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/create-tabbed-navigation-for-multiple-datapages/
http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm

[GoodBoy]

Hello! Here is what I did to reference the value of calculated field in JavaScript.