DEV Community

Discussion on: Async Form Posts With a Couple Lines of Vanilla JavaScript

joshuakb2 profile image
Joshua Baker

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

rikschennink profile image
Rik Schennink Author

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. 🙃

jf1 profile image
Jed Fox

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

document.addEventListener('submit', e => {
  const form =;
  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);
  })().catch(err => {
    Array.from(form.elements).forEach(field => field.disabled = false);

    statusBusy.hidden = false;
    statusFailure.hidden = false;

  // ...