Example – progressively enhancing a form

A <form> element is a section of a document that can contain inputs that will be used to submit information.

By default, when you submit a form, the browser will navigate to a URL to process the form submission. This means that the user will lose the state they are in as they navigate away from the current page when they submit the form.

However, with the ability to make asynchronous requests through the browser fetch API, we can now submit data through API requests without leaving the current page, and stay where we are.

This means that if the site is playing music, video, or animation, they will still be playing while we make asynchronous API calls.

Our task now is to create an action to enhance the form element so that the enhanced form will not navigate to a new location, but rather submit the form data asynchronously.

For lack of a better name, I am going to call this enhancing action enhance.

Before we proceed...