Jump to content

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


Recommended Posts

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>

 

 

 

multi-page.jpg

Link to comment
Share on other sites


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!

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.

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

Loading...
 Share

×
×
  • Create New...