Scroll to top upon submission of form

[telepet]

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>

 

[Kurumi]

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:

[telepet]

Thanks @Meekeee.  The script your provided didn't seem to work.  I also tried below variation below, which also did not work.  I'll explore further the other info you provided and see if I can figure this out.

 

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

 

[Tubby]

@telepet how about this?

<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

[jefryarch]

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.