Jump to content

Displaying A Virtual Field In A Submission Form Html Block


Recommended Posts

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

Link to comment
Share on other sites

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.

1341614

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

    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.

    Guest
    Reply to this topic...

    ×   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.

    Loading...
     Share

    ×
    ×
    • Create New...