Как не отправлять одну форму дважды

31.03.2022 · JavaScript

Как не отправлять одну форму дважды

Двойное нажатие создаёт два запроса. Для формы с AJAX можно блокировать повторный submit до завершения текущей операции. Это удобство интерфейса; важные операции дополнительно требуют защиты от повторов на сервере.

let sending = false;
form.addEventListener("submit", async function(event) {
  event.preventDefault();
  if (sending) return;
  sending = true;
  try {
    const response = await fetch(form.action, { method: "POST", body: new FormData(form) });
    if (!response.ok) throw new Error("HTTP " + response.status);
  } catch (error) {
    console.error(error);
  } finally { sending = false; }
});

Объявите form ссылкой на существующий элемент формы. Добавьте видимый статус отправки и обработку ответа сервера: HTTP 200 ещё не означает успешную валидацию. Не отключайте поля до создания FormData — отключённые поля туда не попадут. Проверьте медленный ответ и сетевой сбой.

Назад в блог

От идеи —
к первому шагу.

Расскажите, что хотите создать.
Обсудим задачу и наметим следующий шаг.