Dynamically Copy Calculated Value to Text Field - Details Page

[kpcollier]

 

I have a Number field that is set to a Calculated Value element on my Details page. This is a Totals field, it sums up values from a number of other fields on the page. This value can change depending on changes that the user selects on various other fields. In example, if the user changed the County to be charged for Tax, the Totals number will reflect that change dynamically.

I need to copy this Totals value over to a text datatype field. In the final result, I need to copy the value from the Totals number field, and manually format it with the US Standard numbering system, including commas and decimal points. I cannot use the formatting features for this, as I need the value to be saved to the table to include the commas and decimal point. 

As you can see from devtools, it looks like the calculated value is two parts, the span and the input elements. I've tried targeting them both and can't get a value either time.

document.addEventListener('DataPageReady', function(){
  var number = document.querySelector('div input[id^="EditRecordTotal_"]').value; //This should be the value of the Total number field/calc value
  console.log(number); //shows nothing in the console, as if the value is blank.
  var totalP = document.getElementById('EditRecordTotal_PDF'); //Total_PDF is the text field
  
  totalP.innerHTML = number.toLocaleString();
  
})

document.addEventListener('DataPageReady', function(){
  var number = document.querySelector('div span[id^="EditRecordTotal@"]').value;
  console.log("number is" + number);
  var totalP = document.getElementById('EditRecordTotal_PDF');
  
  totalP.innerHTML = number.toLocaleString();
  
})

 

[CoopperBackpack]

Hello @kpcollier,

Since the Calculated value consists of span and input, input allows us to listen to the 'change' event.

As you may know, the 'change' event is only fired for <input>, <select>, and <textarea> elements.

So, I usually use the following approach to get the value of the 'Calculated value' field:

<script>
document.addEventListener('DataPageReady', function (event) {
    document.querySelector('[name="EditRecordTotal"]').addEventListener("change", myFunction); 
   
      function myFunction(event) {
   
          let calcField = event.target.value;
          document.querySelector('#EditRecordTotal_PDF').value= calcField.toLocaleString();
     
          document.removeEventListener('DataPageReady', myFunction);
     }        
});
</script>

Since you selected the Total_PDF by its ID, I assume that the field is editable in the DataPage. 

To assign the value from the  'Calculated value' field to it we need to use document.querySelector('#EditRecordTotal_PDF').value instead of    document.querySelector('#EditRecordTotal_PDF').innerHTML.

Here is the output (I use [@cbParamVirtual1]*[@cbParamVirtual2] in the Total field )

[kpcollier]

@CoopperBackpackI greatly appreciated the help and the knowledge. I will give this a try here in a few. 

[kpcollier]

One small change and I was able to get this to work, producing the commas in US format on a text field. The toLocaleString wasn't quite working. Just need to wrap calcField in Number().

For anyone interested, this is going to be my workaround on getting formatted number values onto the generated PDF using the Templates feature. It seems the Templates feature does not let you use any type of data formatting quite yet, which can be tricky if you are trying to create professional documents. Copying the values over to a text field and using that in the PDF is the way to go for now. This is particularly useful for number fields and Date fields, as with date, it will include a time no matter what (even if you don't have time value in the table).

document.addEventListener('DataPageReady', function (event) {
    document.querySelector('[name="EditRecordTotal"]').addEventListener("change", myFunction); 
   
      function myFunction(event) {
   
          let calcField = event.target.value;
          document.querySelector('#EditRecordTotal_PDF').value= Number(calcField).toLocaleString();
     
          document.removeEventListener('DataPageReady', myFunction);
     }        
});