Use XHR with jQuery slim, or even pure JS to handle form submission

[VincentTam]

Motivation

Some developers want their site/theme independent of jQuery, for example, Hugo Swift Theme that I have been invited to collaborate. Others might consider using jQuery slim as many personal blogs need a short loading time rather than fancy animations.

Raison d'être

Each site/theme has its own UI and the script for handling of form submission varies from theme to theme.

Pure JS approach

@onweru has done a great work to parse the form data into JSON to be sent to the API instance. I've tried analyzing his work but I lack the confidence to port that to elsewhere.

https://github.com/onweru/hugo-swift-theme/blob/ef6bc3b099c7448806c13dbd52c2d198e0a8c43b/assets/js/index.js#L283-L299

⚠️ The fetch in his code method doesn't support IE.

jQuery slim compatible

Implementation:

• Jekyll: https://github.com/daattali/beautiful-jekyll/blob/ceb994a4e53283baacd0eb934f0601a267040156/assets/js/staticman.js#L6-L33 in IE & jQuery slim compatible Staticman JS daattali/beautiful-jekyll#782
• Hugo: Use jQuery slim halogenica/beautifulhugo#380 is not optimal becuase of Separate POST URL from <form> element #408—but users are smart enough to write Hugo–HTML template code better than mine (by chopping the entire POST URL into pieces: user, repository and gitProvider).

// adapt it to your site generator
{% assign sm = site.staticman -%}
var endpoint = '{{ sm.endpoint }}';
var repository = '{{ sm.repository }}';
var branch = '{{ sm.branch }}';

// site-generator independent code below
let url = endpoint + repository + '/' + branch + '/comments';
let data = $(this).serialize();
var xhr = new XMLHttpRequest();
xhr.open("POST", url);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.onreadystatechange = function () {
  if(xhr.readyState === XMLHttpRequest.DONE) {
    var status = xhr.status;
    if (status >= 200 && status < 400) {
      formSubmitted();  // write your own implemenation
    } else {
      formError();  // write your own implemenation
    }
  }
};
xhr.send(data);

The only place that uses jQuery slim is $(this).serialize(). Stack Overflow might show you other JS ways replace this function—I find the $ select extremely convenient to use, so I'll stick with jQuery slim, which provides the serialize method.

👨‍💻 I composed the names of the custom functions formSubmitted and formError. Feel free to change them.