Jump to content
  • 0

Accessing value of Calculated Field within javascript




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?


Link to comment
Share on other sites

10 answers to this question

Recommended Posts

  • 0

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.



Link to comment
Share on other sites

  • 0

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



Link to comment
Share on other sites

  • 0

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.

Link to comment
Share on other sites

  • 0

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:


Link to comment
Share on other sites

  • 0

Hi Again,


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.





Link to comment
Share on other sites

  • 0

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


1) Select 'R49' from the Job No dropdown

2) enter '0.004' into the Fan field

Thank you,


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...