JavaScript: как перехватить и обработать отправку формы

Быстрый ответ

Простым и эффективным решением будет перехватить событие submit вашей формы, добавив обработчик с помощью метода addEventListener, и вызвать preventDefault() для отмены стандартного поведения.

document.querySelector('form').addEventListener('submit', event => {
    event.preventDefault();  // Стоп! Прерываем действие по умолчанию.
});

Так вы блокируете стандартное поведение формы, позволяя применить свою логику — например, отправить данные с помощью AJAX.

Детальное объяснение и обработка различных случаев

Применение перехвата формы для разных браузеров

В разнообразном виртуальном мире, браузеры функционируют по-разному. Вам необходимо обеспечить совместимость вашего кода во всех браузерах:

var form = document.getElementById('myForm');

function handleForm(event) {
    event.preventDefault(); // Стоп, вы ещё не отправились.
    // Ваш дополнительный код здесь
}

if (form.attachEvent) {
    form.attachEvent('submit', handleForm);  // Жизнь старых браузеров еще таит сюрпризы
} else {
    form.addEventListener('submit', handleForm);  // Это для современных браузеров!
}

Данный код обеспечивает совместимость, используя attachEvent для старых версий браузеров, которые не поддерживают addEventListener.

Подробнее об этом расскажет наш спикер на видео

Обработка нажатия клавиши Enter

Пользователи часто применяют клавишу Enter для отправки формы. Вот как вы можете управлять этим поведением:

form.addEventListener('keypress', function(event) {
    if (event.keyCode === 13 || event.which === 13) {
        event.preventDefault();  // Не так быстро, Enter.
        // Здесь ваш код связанный с обработкой отправки
    }
});

С данным кодом, вы контролируете процесс отправки формы с помощью клавиши Enter, этим вы даете возможность своему коду осуществить необходимые действия.

Повышение безопасности при отправке формы

Безопасность в приоритете. Усилить безопасность отправки данных можно, используя скрытые поля, такие как токены CSRF:

function addCSRFToken() {
    var hiddenField = document.createElement('input');
    hiddenField.type = 'hidden';
    hiddenField.name = 'csrf_token';
    hiddenField.value = 'ваш_секретный_токен';
    document.getElementById('secureForm').appendChild(hiddenField);
}

window.addEventListener('DOMContentLoaded', (event) => {
    addCSRFToken();  // Теперь форма защищена!
});

Применение токена CSRF повышает безопасность форм за счет использования скрытого поля, которое устанавливается перед отправкой данных.

Визуализация

Отправка формы – это будто отправление поезда по маршруту:

        [Отправить] -> 🚂 Поезд

Когда пользователь нажимает кнопку отправить, поезд выполняет свое путешествие в "страну серверов".

document.getElementById('form').addEventListener('submit', function(event) {
    event.preventDefault(); // Меняем направление движения...
});

Используя event.preventDefault(), мы управляем маршрутом поезда:

[Ввод пользователя] -> [🚂 Поезд останавливается]

Теперь JavaScript решает, когда и в какую сторону уедет поезд.

form.submit(); // Теперь мы готовы отправить данные на сервер!

Основная идея: JavaScript дает вам возможность контролировать путь отправки формы и управлять её конечным маршрутом.

Полезные материалы

1. Метод Event: preventDefault() – Веб-API | MDN — Подробнее о отмене стандартного поведения.
2. Метод HTMLFormElement: submit() – Веб-API | MDN — Изучите возможности программной отправки форм.
3. Клиентская валидация форм – Изучение веб-разработки | MDN — Освоить валидацию форм на стороне клиента.
4. Формы: событие и метод submit — Узнайте, как обрабатывать события отправки формы в JavaScript.
5. Событие submit | jQuery API Documentation — Глубже изучите события submit при помощи jQuery.
6. Получение данных с сервера – Изучение веб-разработки | MDN — Узнайте, как получить данные с сервера с использованием веб-API.