Vanilla JavaScript AJAX form submit

January 25, 2022

I need help to make a form submit using AJAX in Vanilla JavaScript (No jQuery).
I have this jQuery Code that i need converted to JavaScript.

  $(document).ready(function() {
    $('.myForm').submit(function (event) {
      var data = $(this);
      $.ajax({
        type: data.attr('method'),
        url: data.attr('action'),
        data: data.serialize(),
        success: function (data) {

        }
      });
      event.preventDefault();
    });
  });

>Solution :

You can use the built-in Fetch API for AJAX calls and FormData to parse your form.

Other than that, just replace your jquery with event listeners, query selectors, and attribute getters.

document.addEventListener('DOMContentLoaded', function() {
  document.querySelector('.myForm').addEventListener('submit', function (event) {
    var data = this;
    fetch(data.getAttribute('action'), {
      method: data.getAttribute('method'),
      body: new FormData(data)
    }).then(res=>res.text())
      .then(function (data) {
        
      });
    event.preventDefault();
  });
});