What is the flow that happens when submitting the form on a cloud page using Axios/ajax?

Question

I am trying to implement the solution given by this website, to start an automation from a cloud page.

There are 3 parts of code.

1. HTML page (understood this)
2. form-handler code with SSJS (understood this)
3. app.js (did not understand this)

I am not able to understand the overall flow. On submit of the form, I get that the data is posted to a form-handler. Then I am not able to understand how app.js plays its part between HTML & form handler.

Can anyone help me crack the logic behind this setup?

Answer 1

The app.js file encapsulates all the client-side JavaScript logic during form submission:

• Validating form input
• Sending requests/data to the server-side resource (e.g., the SSJS handler)
• Handling the server-side resource's response to a request (e.g., updating an HTML element — <span v-html="message"></span> — with the latest status)
• Continuing to poll the server-side resource at a set interval in the background — this is where Axios helps

In the article you linked to, the Vue.js JavaScript framework was used, but the same logic can be implemented using any other UI library/framework (e.g., React, Angular, Svelte, etc.) or even plain/vanilla JavaScript (although more verbose).

Why use client-side JavaScript at all in this scenario? It allows you to kick-off an automation with a single click and watch its current status update without having to manually refresh/resubmit the HTML form (thanks to Axios/AJAX).