Move values from multiple Calculated Values to the multiple editable fields

[CoopperBackpack]

I would like to share a code that moves values from multiple Calculated Values to editable fields that are set up as 'Text Field'.

For example, there is a Submission Form where some values should be calculated or retrieved from a different table. 

But at the same time, these values must be editable, so the end-user can change them if needed. 

So, we have pre-populated fields with dynamically calculated values and the user can change them. 

In this example, I need to pre-populate the Company_Name field, Email, and Percentage.
 

[CoopperBackpack]

1) First of all, the values are calculated/retrieved in the Virtual fields and the Form element for them is "Calculated Value". 

2) The Virtual fields are hidden by checking the 'Hide field' checkbox on the Advanced tab.

3) In the Footer section this code can be used (please disable the HTML editor on the Advanced tab before pasting it).

<script>
document.addEventListener('DataPageReady', assignValuesHandler);

  function assignValuesHandler() {

    //The list of Virtual fields

    const virtualFields = '[name="cbParamVirtual1"], [name="cbParamVirtual2"], [name="cbParamVirtual3"]'; 

    //Each editable field is stored in a separate variable 

    const company = document.querySelector('[name="InsertRecordCompany_Name"]'); 
    const email = document.querySelector('[name="InsertRecordEmail"]');
    const percentage = document.querySelector('[name="InsertRecordPercentage"]');

    //Variables created above are stored in the array

    const editableFields = [company, email, percentage];

     //Function that assigns values

    document.querySelectorAll(virtualFields).forEach((virtual, index) => 
      virtual.addEventListener('change', (event) => {
            
        editableFields[index].value = virtual.value;
      })
    )
  document.removeEventListener('DataPageReady', assignValuesHandler);
};
</script>

The parts of the code that should be customized:

• the list of the Virtual fields in the 'virtualFields' variable;
• the list of the editable fields: the logic is to create a separate variable for each field and to select the corresponding field. 

              On the Submission Form the syntax is  document.querySelector('[name="InsertRecordField_Name"]'), where Field_Name  is your field name.

• the list of editable fields in the 'editableFields' variable.

The important point is the order of the fields in the 'virtualFields ' and  'editableFields' variables.

The values will be mapped, so the order matters. In this example the value from Virtual1 will be copied to the Company_Name field, the value from Virtual2 will be copied to the Email field, and the value from Virtual3 will be copied to the Percentage field.

 

The output: