I have a Caspio form embedded in a webpage.  I want scroll to top of webpage upon submission of form.    Is that possible?

The form is in an iFrame.  From what I understand, you need to reference the form's ID and run something like the below in the footer.   It doesn't seem to be working though.  I wonder if it's because I don't have a correct form ID?

<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function() {
    document.getElementById('CaspioForm').addEventListener('submit', function() {
      window.parent.scrollTo(0, 0);
</script>

Hi @telepet - Have you tried to use the function FormSubmitted ? This is applicable when the form is submitted. For reference: https://howto.caspio.com/datapages/ajax-loading/

You may try this script:

<script type="text/javascript">
document.addEventListener('FormSubmitted', function (event) {
	window.scrollTo({top: 0, behavior: 'smooth'});
</script>

Here is the other post related:

<script type="text/javascript">
document.addEventListener('submit', function (event) {
	window.scrollTo({top: 0, behavior: 'smooth'});
</script>

<script type="text/javascript">
document.addEventListener('FormSubmitted', function (event) {
	window.parent.scrollTo({top: 0, behavior: 'smooth'});
</script>

I noticed that the scripts from Meekeee and your last comment is not using "parent" and you are trying to scroll up on your parent page rather than inside the iFrame right? However, I think you'll run across "Uncaught DOMException: Blocked a frame with origin "" from accessing a cross-origin frame." console error if your parent page is not from Caspio as it is a security risk for an iFrame to take control of the parent page and most browsers doesn't allow this.

Read more about the error from this stackoverflow link: https://stackoverflow.com/questions/25098021/securityerror-blocked-a-frame-with-origin-from-accessing-a-cross-origin-frame The "Blocked a frame with origin from accessing a cross-origin frame" error is triggered by the Same-Origin Policy in web browsers, which prevents scripts in one frame from directly accessing content in a frame from a different origin due to security concerns. To address this issue, you should employ cross-origin communication techniques such as postMessage() for controlled messaging between frames, configure Cross-Origin Resource Sharing (CORS) headers when controlling both source and destination servers, or use JSONP for data retrieval. Verify proper URL configuration, consider server-side solutions, and adhere to browser extension policies. These measures ensure secure and legitimate interactions between frames without violating the security constraints imposed by the Same-Origin Policy. 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.