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

[CoopperBackpack]

Hello,

 

I have a Submission form DataPage , one of the fields is set to the Calculated value. 

And I need to display the value from this field in the HTML block.

 

How can I achieve this? 

 

[Johnny]

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);
     }        
});
</script>

 

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.

 

Regards,

Johnny

[techguy]

I know this is an older toppic, but what if I want to add 4 different text fields inside of an HTML block, and as they are typing the fields in the form, they appear in the HTML block. I see one will work above, but what about 4 fields in the text?

[CoopperBackpack]

Hello @techguy,

could you please elaborate on the result you need to achieve?

Is it a Submission form where the values from the input fields should be moved to the HTML block like this?

The screenshot of the HTML block will be helpful. 

[techguy]

this is exactly the concept  I want. When the person enters the data into the text field, I want the html block to automatically fill in the data from text fields

 

[techguy]

Do you have an example of the HTML block code for your example?

[CoopperBackpack]

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>

</div>

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.

<script>
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);
};
</script>

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.