Support for Zero-JS Form Submissions with Query Params for Success and Error Messages

[fayez-nazzal]

We are willing not to require JS for users to use the website. We only use JS to enhance the experience, but the basic functionality isn't JS dependent. So, we are not using AJAX requests. We rely on HTML form elements.

The subscription endpoint is a POST method that takes email and topics as query parameters and returns a FormData payload with "message" and "topics" properties.

We use a form element to handle subscriptions. Here is a minimized version of the code:

<form
    method="POST"
    action={SUBSCRIPTIONS_BASE_URL}
>
    <input type="email" name="email" />
    <input type="checkbox" name="topics" value="MNNexus" />
    <input type="checkbox" name="topics" value="Shalimar" />
    <button type="submit"> Subscribe </button>
</form>

Upon submission, this will be done:

• Because the method is set as POST, the form element will send a request SUBSCRIPTIONS_BASE_URL without any query params but send a FormData payload like the following:

  email: user@example.com
  topics: MNNexus
  topics: Shalimar

• The method redirects the user to SUBSCRIPTIONS_BASE_URL, and this is the end. The user left wwpray page.

To enhance compatibility, the following changes could be made to SUBSCRIPTIONS_BASE_URL:

• Change the endpoint method to GET, or read data as FormData instead of query params.
  • If subscription is successful, redirect to back to the original page with message= and topics= query params
  • If subscription failed, redirect with error_message= query param.

[hammady]

@fayez-nazzal thanks for the detailed explanation.

Change the endpoint method to GET, or read data as FormData instead of query params.

Will support both GET and POST. The recommended method is POST, and that's what we should use in the JS version. Reading FormData in Python does not seem clean using the simple http server, not worth the migration to Flask or an advanced server.

If subscription is successful, redirect to back to the original page with message= and topics= query params If subscription failed, redirect with error_message= query param.

The server can check for the request header Accept: application/json and if found will return JSON response, otherwise, it will redirect back to the referrer (found in the Referrer request header) with the above parameters. If no referrer found, it will return an HTML response. Does this sound good?

[fayez-nazzal]

Cool @hammady, I will check.

[fayez-nazzal]

@hammady Is support for GET request implemented?

[hammady]

@fayez-nazzal finalizing the PR.