Prevent submission of an update form depending on the status of another datapage.

[EmmePGN]

Hello,

I've been looking at the CASPIO guide for Ajax loading. There are few refs in there that are helpful, but my knowledge of javascript is limited.

But I have this use case, and I was wondering if there is a way to conditionally submit an update form ONLY if the other Datapage (deployed on the same webpage) is "SAVED" or UPDATED. 

Here's the use case:

1. User must fill out the form on the left FIRST and then click "Save".  

2. Then user can fill out the right Form and click "Next"  only if they completed the form on the left.  If the form on the left is not Updated or Saved, users should be prevented from submitting the form and an error message pops up  to tell users that have to Save the form on the left.

The attached picture is a webpage with 3 caspio datapages, I attached it for reference.

 

I will truly appreciate any help in building the script that perhaps with below functionality.

I hope I am making some sense.

 

<script type="text/javascript">

document.addEventListener('BeforeFormSubmit', function(event) {
  });

document.addEventListener('BeforeFormSubmit', function (event) {
           if (event.detail.appKey == 'MY_DATAPAGE_APPKEY') {
              //check if .appKey == 'MY_DATAPAGE_APPKEY' is updated and give a pop up message.

           } else if (event.detail.appKey == 'MY_WEB_FORM_APPKEY')    {
              //submit the form
    }
});

</script>

 

 

 

[LWSChad]

Try hiding or disabling the button the data page on the right until the data page on the left is submitted.
 

1) In the footer of the data page on the right.

<script>
  const submitBtnR = document.querySelector('#datapage-onright-container #Submit');
  submitBtnR.disabled = true;
</script>

** When you have multiple data pages per web page, the button ids are likely doubled up. So, use document.querySelector to add the containing element to the selector to disable and enable only the submit button you want.

 

2) Then, in the destination and messaging (submit success page) section of the data page on the left, enable the button in the data page on the right.

<script>
  const submitBtnR = document.querySelector('#datapage-onright-container #Submit');
  submitBtnR.disabled = false;
</script>

 

Hope this helps!