Как перевести код с JQuery на JS под Bootstrap5?

Question

[tenblogman]

Ребята, помогите перевести мой код с JQuery на JS для формы с Ajax.
Перевожу свой сайт с bootstrap4 на bootstrap5 и хочу отказать от JQuery.
Вот мой код для сбора инфы с формы обратной связи:

$(document).ready(function () {
    $("form").submit(function () {
        // Получение ID формы
        var formID = $(this).attr('id');
        // Добавление решётки к имени ID
        var formNm = $('#' + formID);
        $.ajax({
            type: "POST",
            url: 'mail.php',
            data: formNm.serialize(),
            success: function (data) {
                // Вывод текста результата отправки
                $(formNm).html(data); 
            },
            error: function (jqXHR, text, error) {
                // Вывод текста ошибки отправки
                $(formNm).html(error);         
            }
        });
        return false;
    });
});

Answer 1

[Павел]

document.addEventListener('DOMContentLoaded', function () {
  var forms = document.querySelectorAll('form');
  for (var i = 0; i < forms.length; i++) {
    forms[i].addEventListener('submit', function (event) {
      event.preventDefault();
      // Получение ID формы
      var formID = this.getAttribute('id');
      // Добавление решётки к имени ID
      var formNm = document.getElementById(formID);
      var xhr = new XMLHttpRequest();
      xhr.open('POST', 'mail.php', true);
      xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          // Вывод текста результата отправки
          formNm.innerHTML = xhr.responseText;
        } else if (xhr.readyState === 4) {
          // Вывод текста ошибки отправки
          formNm.innerHTML = 'Ошибка отправки: ' + xhr.status;
        }
      };
      xhr.send(new FormData(this));
    });
  }
});

Answer 2

[Henxed]

Чуть более современный способ через fetch, но можно и axios библиотеку

document.addEventListener('DOMContentLoaded', function() {
  const forms = document.getElementsByTagName('form');
  for (let form of forms) {
    form.addEventListener('submit', function(event) {
      event.preventDefault();
      const formId = this.getAttribute('id');
      const formNm = document.getElementById(formId);
      const formData = new FormData(this);
      fetch('mail.php', {
        method: 'POST',
        body: formData
      })
      //axios.post('mail.php',  { body: formData })
      .then(response => response.text())
      .then(data => {
        formNm.innerHTML = data;
      })
      .catch(error => {
        formNm.innerHTML = error;
      });
    });
  }
});