Как отправить HTML-форму без перезагрузки страницы


HTML

Создайте форму:

<form action="https://private-c4cefc-codepenvf.apiary-mock.com/sendform">
  <input name="message" placeholder="Message" required>
  <button>Send</button>
</form>
Вход в полноэкранный режим Выход из полноэкранного режима

Я использую сервис apiary для генерации JSON-ответа с сервера:

{
    "success": "true",
    "message": "The form has been sent!"
}
Войти в полноэкранный режим Выход из полноэкранного режима

JavaScript

Находим все, что нам нужно, и добавляем слушателя:

let form;
let action;

function findElements() {
  form = document.querySelector('form');
  ({ action } = form);
}

function subscribe() {
  form.addEventListener('submit', onSubmit);
}

function init() {
  findElements();
  subscribe();
}

init();
Войти в полноэкранный режим Выход из полноэкранного режима

При отправке формы:

function onSubmit(event) {
  event.preventDefault();
  const { currentTarget } = event;
  sendForm(currentTarget)
    .then(response => onSuccess(response, currentTarget))
    .catch(onError);
}
Войти в полноэкранный режим Выйти из полноэкранного режима
  • Отключите стандартное поведение с помощью preventDefault;
  • Отправьте форму;
  • В случае успеха вызовите функцию onSuccess;
  • В противном случае onError.

Отправка формы

Основано на функции fetch:

function collectData(currentForm) {
  const data = new FormData(currentForm);
  return data;
}
function setOptions(currentForm) {
  return {
    method: 'post',
    body: collectData(currentForm),
  };
}

function sendForm(currentForm) {
  return fetch(action, setOptions(currentForm));
}
Вход в полноэкранный режим Выход из полноэкранного режима

Первый аргумент — это url, к которому вы хотите обратиться;
Второй — объект с данными.

В случае успеха вызовите функцию onSuccess

function showMessage(data) {
  alert(data.message);
}

function onSuccess(response) {
  return response.json().then(showMessage);
}
Вход в полноэкранный режим Выйти из полноэкранного режима

Fetch возвращает Promise, поэтому сначала мы получаем json, а затем вызываем функцию showMessage.
Для упрощения примера я поместил сообщение в alert.

При возникновении ошибки мы вызываем функцию onError

function onError(data) {
  console.error(data);
}
Вход в полноэкранный режим Выйти из полноэкранного режима

Функция onError, вызываемая через catch, уже будет содержать аргумент с информацией об ошибке.

Полный код

let form;
let action;

function findElements() {
  form = document.querySelector('form');
  ({ action } = form);
}

function showMessage(data) {
  alert(data.message);
}

function onSuccess(response) {
  return response.json().then(showMessage);
}

function onError(data) {
  console.error(data);
}

function collectData(currentForm) {
  const data = new FormData(currentForm);
  return data;
}

function setOptions(currentForm) {
  return {
    method: 'post',
    body: collectData(currentForm),
  };
}

function sendForm(currentForm) {
  return fetch(action, setOptions(currentForm));
}

function onSubmit(event) {
  event.preventDefault();
  const { currentTarget } = event;
  sendForm(currentTarget)
    .then(response => onSuccess(response, currentTarget))
    .catch(onError);
}

function subscribe() {
  form.addEventListener('submit', onSubmit);
}

function init() {
  findElements();
  subscribe();
}

init(); 
Вход в полноэкранный режим Выйти из полноэкранного режима

В читабельном виде — на codepen.

Оцените статью
Procodings.ru
Добавить комментарий