Learn-to-send-email-via-google-script-html-no-server: Review alternative methods of form serialization & XHR sending

[mckennapsean]

Saw some other great examples here I wanted to circle back to at some point:
https://htmldom.dev/submit-a-form-with-ajax
https://htmldom.dev/serialize-form-data-into-a-query-string

[belvederef]

I would recommend leveraging modern browser apis and, if coding in a framework that provides data binding, use something much simpler as:

const res = await fetch(this.mailSenderUrl, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
  },
  body: new URLSearchParams({
    name: this.form.name,
    email: this.form.email,
    message: this.form.message,
  }),
});
if (res.status === 200){ 
  // do something... 
}

@nelsonic should I make a pull request to include this snippet somewhere? It's rather useful for who's using frameworks like nuxt, gridsome and gatsby.

Could also make a codepen of a working Vue project using this if it is going to be included in the project, let me know.

[mckennapsean]

I’ve debated fetch as well #131 -how much do we care about IE support?

To keep this as user friendly and accessible as possible, my preference has been to avoid complicating things with build steps due to the nature of the users coming to this tutorial. Thoughts?

[nelsonic]

@mckennapsean yeah, the purpose of this tutorial/example was always to be as basic/simple as possible so that _anyone_ can follow it. The more steps or complex code we add the less beginners can understand it.
(_or the more support questions we will have..._)
People should definitely add frameworks and build steps where appropriate to their own implementations. Internet Explorer support is still relevant to some people but each person should consider their own needs based on analytics data.

[belvederef]

That is a fair point. I just thought we could save the next person some time by adding the "modern" version to the tutorial, since, for example, it took me a while to go through form-submission-handler.js and adapting it to my codebase.

So, not replacing the old way, just adding it as a subsection under:

1. Submit the Form using JavaScript "AJAX"