Create event listener to monitor changed field value

[BillW]

I have a tabular datapage with one field (Date_Due) that I'm attempting to monitor for a change in value.

When a change is detected, I wish to set the value of a second  Yes/No field (Date_Due_Changed) to Yes.

I can't seem to read any value except for null.

 

<script>
document.addEventListener('DataPageReady', function() {

  document.getElementById("EditRecordDate_Due").addEventListener('change', function() {
    alert("Date Due has been changed");
    document.getElementById("EditRecordDate_Due_Changed").value = "Yes";
    

}); // end of change event listener
}); // end of DataPageReady event listener
</script>

[CoopperBackpack]

Hello @BillW,

In case you need to make a checkbox element checked, please try changing the code a bit. 

<script>
document.addEventListener('DataPageReady', function() {

  document.getElementById("EditRecordDate_Due").addEventListener('change', function() {
    alert("Date Due has been changed");
    document.getElementById("EditRecordDate_Due_Changed").checked = true;
    

}); // end of change event listener
}); // end of DataPageReady event listener
</script>

Please update this thread if you have further questions. 

[CoopperBackpack]

Also, I would like to add that you may use another approach to add the the event listener like this:

<script type="text/javascript">
document.addEventListener('DataPageReady', assignAdditionalListener)

function assignAdditionalListener() {
   document.getElementById("EditRecordDate_Due").addEventListener('change', customAlert); 
   document.removeEventListener('DataPageReady', assignAdditionalListener)
}

function customAlert(event) {
    alert("Date Due has been changed");
    document.getElementById("EditRecordDate_Due_Changed").checked = true;
}

</script>

This approach is considered to be more effective in terms of code execution. 

 

[BillW]

On 12/1/2020 at 2:24 AM, CoopperBackpack said:

Also, I would like to add that you may use another approach to add the the event listener like this:

<script type="text/javascript">
document.addEventListener('DataPageReady', assignAdditionalListener)

function assignAdditionalListener() {
   document.getElementById("EditRecordDate_Due").addEventListener('change', customAlert); 
   document.removeEventListener('DataPageReady', assignAdditionalListener)
}

function customAlert(event) {
    alert("Date Due has been changed");
    document.getElementById("EditRecordDate_Due_Changed").checked = true;
}

</script>

This approach is considered to be more effective in terms of code execution. 

 

CooperBackpack,

I have tried both of the code changes you recommended and both produce the same 'null' result.  I have attached a file that shows the console error.  The software is still hanging up as it attempts to read the value of the 'Date_Due' Yes/No data element.

Screen Shot(4).docx

[BillW]

On 11/27/2020 at 10:19 PM, BillW said:

I have a tabular datapage with one field (Date_Due) that I'm attempting to monitor for a change in value.

When a change is detected, I wish to set the value of a second  Yes/No field (Date_Due_Changed) to Yes.

I can't seem to read any value except for null.

 

<script>
document.addEventListener('DataPageReady', function() {

  document.getElementById("EditRecordDate_Due").addEventListener('change', function() {
    alert("Date Due has been changed");
    document.getElementById("EditRecordDate_Due_Changed").value = "Yes";
    

}); // end of change event listener
}); // end of DataPageReady event listener
</script>

CooperBackpack,

This issue is now closed.  I just received a solution from the MAS5 team.  Their solution is shown below.  This is WAYYY more complex an issue then I thought.  I thank you so much for your efforts.

Bill Winkel

 

<script>
  function getUrlVars() {
    const vars = [];
    let hash;
    const hashes = window.location.href
      .slice(window.location.href.indexOf("?") + 1)
      .split("&");

    for (var i = 0; i < hashes.length; i++) {
      hash = hashes[i].split("=");
      hash[1] = unescape(hash[1]);
      vars.push(hash[0]);
      vars[hash[0]] = hash[1];
    }

    return vars;
  }

  function getUrlVar(key) {
    return getUrlVars()[key];
  }
</script>

<script>
  function waitForElements(options) {
    return function wait() {
      const $elements = document.querySelectorAll(options.selector);

      if (
        $elements.length < options.expectedLength ||
        !options.onverify($elements, options.expectedLength)
      ) {
        options.onwait($elements);
        window.requestAnimationFrame(waitForElements(options));
      } else {
        // Do something with $elements -->
        options.onload($elements);
      }
    };
  }

  function isFormFieldNotEmpty($element) {
    return !["", " ", "&nbsp;"].includes($element.value);
  }

  function verifyDateDue(verifier) {
    return ($elements, expectedLength) =>
      Array.from($elements)
        .map(verifier)
        .reduce((accumulator, current) => accumulator && current, {});
  }

  function handleInlineEdit(options) {
    waitForElements({
      selector: `${options.root} ${options.field.type}[name^="InlineEdit${options.field.name}"]`,
      expectedLength: 1,
      onverify: verifyDateDue(isFormFieldNotEmpty),
      onwait: function ($elements) {},
      onload: function ($elements) {
        // TODO: Add your code here -->
        options.field.onload($elements);
      },
    })();
  }
</script>

<script>
  function handleEditClick(event) {
    handleInlineEdit({
      root: "",
      field: {
        name: "Date_Due",
        type: "input",
        onload: ($elements) => {
          const dateDue = $elements[0];
          dateDue.dataset.cbPreviousValue = dateDue.value;

          dateDue.removeEventListener("change", myFunction);
          dateDue.addEventListener("change", myFunction);
        },
      },
    });
  }

  document.addEventListener("DataPageReady", (event) => {
    if (event.detail.appKey === "[@cbAppKey]") {
      const editLinks = Array.from(
        document.querySelectorAll('a[data-cb-name="InlineEdit"]')
      );

      editLinks.forEach((link) => {
        if (!link) {
          return false;
        }

        link.removeEventListener("click", handleEditClick);
        link.addEventListener("click", handleEditClick);
      });
    }
  });

  function myFunction(event) {
    if (event.target.dataset.cbPreviousValue !== event.target.value) {
      //alert("The change event occurred.");
    }

    const dateDueChanged = document.querySelectorAll(
      'input[name="InlineEditDate_Due_Changed"]'
    )[0];

    dateDueChanged.value =
      event.target.dataset.cbPreviousValue !== event.target.value ? "Y" : "";
    dateDueChanged.checked =
      event.target.dataset.cbPreviousValue !== event.target.value;
  }
</script>

[CoopperBackpack]

@BillW,

Thanks for sharing the solution.

I was inattentive, I see now that you mentioned the tabular report in your initial request.

As far as I know, customization of the editing options on the Tabular Report is quite complex.

Since you used syntax like "EditRecordField_name", I thought that you have a Details or Single Record Update DataPage (https://forums.caspio.com/topic/4377-js-guide-caspio-form-elements/).

For these DataPages the solution should work.