Jump to content

JavaScript: Syncing a Dynamically Changing Calculated Field with a Text Input Field"

Recommended Posts

Hi, this isn't a question; I just wanted to share the following information:

I was looking for a solution to synchronize my text input field and my calculated field only when the values of the calculated field change. Here's how I achieved this:


document.addEventListener("DataPageReady", function() {
  // Get the text input field
  const inputField = document.getElementById("InsertRecordfieldc");
  // Add a change event listener to all elements whose IDs start with "cbParamVirtual1"
  document.querySelectorAll('[id^="cbParamVirtual1"]').forEach(function(calculatedField) {
    calculatedField.addEventListener("change", function() {
      // Update the text input field with the value of the changed calculated field
      inputField.value = calculatedField.value;


1.) First we need the Caspio  event listener DataPage ready. This code sets up an event listener that waits for the "DataPageReady" event to occur.
2.) Since the calculated field input field id is dynamically change we use a query selector and use a loop to select all id's that start with "cbParamVirtual1" or the id of your field which could varies depending on the number of your virtual field.
3.) Inside the "change" event listener function, inputField.value = calculatedField.value; is used to update the value of the text input field (InsertRecordfieldc) with the value of the changed calculated field (calculatedField). Essentially, it's synchronizing the value of the text input field with the value of the dynamically changing calculated field.

Hope this helps!

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