Jump to content
  • 0

Create event listener to monitor changed field value


BillW

Question

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>

Link to post
Share on other sites

5 answers to this question

Recommended Posts

  • 0

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. 

Link to post
Share on other sites
  • 0

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. 

 

Link to post
Share on other sites
  • 0
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

Link to post
Share on other sites
  • 0
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>

Link to post
Share on other sites
  • 0

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

 

Link to post
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
Answer this question...

×   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...
×
×
  • Create New...