Jump to content

How to receive the value from the field to the HTML block

Recommended Posts

Hi @CoopperBackpack

Hope you are well.

Here is the code that would let you to achieve the result. You should insert it in your HTML block.  And I will explain the code below. Please be aware, that I used Virtual Field for this example with name "cbParamVirtual1" as a Calculated Value, since in Caspio  virtual field has syntax [@cbParamVirtual1].  You can put there your own field name if needed instead of "cbParamVirtual1"

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

<script type="text/javascript">
document.addEventListener('DataPageReady', function (event) {
     document.querySelector('input[id*="cbParamVirtual1"]').addEventListener("change", myFunction); 
      function myFunction(event) {
          let virField = event.target.value;
          document.querySelector('.message').innerHTML = "your text should be here " + virField;
          document.removeEventListener('DataPageReady', myFunction);


This is the part where you insert text, added by JS code::

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


The JS code has place, where you should enter the text you want to have in HTML block.  Here is this part, replace "your text should be here " for the one you need.

document.querySelector('.message').innerHTML = "your text should be here " + virField;


Hope it helps.




Link to comment
Share on other sites

  • 2 years later...
  • 2 weeks later...

Hello @techguy,

Sorry, I missed this thread. 

Let me share an example with 4 basic Text fields on the Submission form. 

If you use not just Text fields, but Dropdowns, Radio Buttons, etc., these elements should be selected slightly differently.

1) As a first step I added this code to the HTML block

<div style="padding: 10px 5px; background: #b3c7e8;">

<p> First name: <span id="firstName"></span> </p>
<p> Last name: <span id="lastName"></span></p>
<p> Email: <span id="email"></span> </p>
<p> Company: <span id="company"></span> </p>


The <div> tag is optional, I used it to set the background color and padding.

The paragraph tag (<p>) is optional too, I used it to add titles like 'First name:' etc.

The main goal is to add tags with unique IDs (they are highlighted in the screenshot). You may name them differently. 



2) As a second step, we must add JavaScript code to the Footer section. Please disable the HTML editor on the Advanced tab before adding to the code.

document.addEventListener('DataPageReady', assignValuesHandler);

  function assignValuesHandler() {

    //The list of input fields

    const textFields = ' #InsertRecordFirst_Name, #InsertRecordLast_Name, #InsertRecordEmail, #InsertRecordCompany_Name '; 

    //Variables to select containers (<span>) from the HTML block

    const firstName= document.querySelector('#firstName'); 
    const lastName= document.querySelector('#lastName');
    const email = document.querySelector('#email');
    const company= document.querySelector('#company');

    //Array to store variables created above 

    const htmlBlockFields = [firstName, lastName, email, company];

     //Function that assigns values

    document.querySelectorAll(textFields).forEach((field, index) => 
      field.addEventListener('change', (event) => {
        htmlBlockFields[index].innerText = field.value;
  document.removeEventListener('DataPageReady', assignValuesHandler);

In the code, you need to modify the variables according to your needs.

  • const textFields stores the comma-separated list of your input fields. For the Text fields on the Submission form, the syntax is #InsertRecordFieldName, where FieldName is the name of the field in the table;
  • four variables below are used to select the <span> elements from the HTML block by their IDs.
  • const htmlBlockFields stores the comma-separated list of four variables for the <span> elements, please use your variable names.

Let me know if you need any further assistance with this solution. 

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.

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.

  • Create New...