loading...

Async Form Posts With a Couple Lines of Vanilla JavaScript

Rik Schennink on January 24, 2019

In this tutorial, we will write a tiny JavaScript event handler that will post our HTML forms using fetch instead of the classic synchronous redi... [Read Full]
markdown guide
 

Is there a reason you're not using async/await in 2019? I think the title of this article is slightly misleading.

 

Honestly, I havenโ€™t gotten around to using it enough for me to feel comfortable advising others to use it.

I wonder if the prevent default call would still run while the fetch request has started, I guess not as async/await makes it synchronous so in that sense I suspect without can be better in this case.

I understand what you mean about the title being misleading, but without the edge cases (and all the comments) it truly is only a couple (okay not two) lines of JS. ๐Ÿ™ƒ

 

You could use an II(AA)FE to use async-await:

document.addEventListener('submit', e => {
  const form = e.target;
  const statusBusy = form.querySelector('.status-busy');
  const statusFailure = form.querySelector('.status-failure');

  (async () => {
    const res = await fetch(form.action, {
      method: form.method,
      body: new FormData(form)
    })
    const doc = new DOMParser().parseFromString(await res.text(), 'text/html')

    const result = document.createElement('div');
    result.innerHTML = doc.body.innerHTML;
    result.tabIndex = -1;
    form.parentNode.replaceChild(result, form);
    result.focus();
  })().catch(err => {
    Array.from(form.elements).forEach(field => field.disabled = false);
    lastActive.focus();

    statusBusy.hidden = false;
    statusFailure.hidden = false;
  });

  // ...

});
 

Awesome write up! I definitely learned some things I'll be implementing into my future form creations. I really appreciate the details and explanations you gave for each line of code. Thank you!

 

So glad to hear that Mike! Thanks so much for taking the time to write this feedback.

code of conduct - report abuse