Displaying A Virtual Field In A Submission Form Html Block

[MarkMayhrai]

Hello,

I'm spending alot of time looking through the community, and need help now, please....

I've a submission form, which has a virtual field, and would like to have the virtaul field show in an HTML BLOCK and update whenerver the virtual field is change in the html block.

Really just needed the HTML because I could change the text size etc for the user to see.

Help, please

[Kurumi]

Hi @MarkMayhrai - what form element is your Virtual Field? It is possible to display the value from the field that is set to the Calculated Value in the HTML block/Header/Footer (on the Submission form).

Add some element (div, span, p) with a custom CSS class to the HTML block (or Header/or Footer). For example:

<div class="message"></div>

If the field that is set to the Calculated Value is a Virtual field, use this code in the Footer section of the DataPage:

<script>
document.addEventListener('DataPageReady', function (event) {
  
document.querySelector('input[id*="cbParamVirtual1"]').addEventListener("change", myFunction); 
   
      function myFunction(event) {
   
          let calcField = event.target.value;
          document.querySelector('.message').innerHTML = calcField;
     
          document.removeEventListener('DataPageReady', myFunction);
     }        
});
</script>

Replace cbParamVirtual1 with another name according to the Virtual field number if needed.

I got this solution from  @CoopperBackpack , thank you for this!

[AveEd]

On 11/22/2021 at 3:08 PM, Meekeee said:

Hi @MarkMayhrai - what form element is your Virtual Field? It is possible to display the value from the field that is set to the Calculated Value in the HTML block/Header/Footer (on the Submission form).

Add some element (div, span, p) with a custom CSS class to the HTML block (or Header/or Footer). For example:

<div class="message"></div>

If the field that is set to the Calculated Value is a Virtual field, use this code in the Footer section of the DataPage:

<script>
document.addEventListener('DataPageReady', function (event) {
  
document.querySelector('input[id*="cbParamVirtual1"]').addEventListener("change", myFunction); 
   
      function myFunction(event) {
   
          let calcField = event.target.value;
          document.querySelector('.message').innerHTML = calcField;
     
          document.removeEventListener('DataPageReady', myFunction);
     }        
});
</script>

Replace cbParamVirtual1 with another name according to the Virtual field number if needed.

I got this solution from  @CoopperBackpack , thank you for this!

I need to use the value with a html block script. Any suggestions on alternatives to  <div class="message"></div>

Thank you in advance!

[Kurumi]

Hi @AveEd -  this depends on you, you can use other HTML tag such as <span> or <pre> or <p>

<div class="message"></div>