Как отловить отправку формы не только кнопкой?

Question

[Константин Теплоухов]

Как отловить отправку формы не только по кнопке но и через enter ?
Мне нужно обработать данные перед тем как отправлю их на бек . С jquery такое делал но сейчас нужно на ванильном js
ps Гугл помочь не смог, всё что нагуглил с jquery

Answer 1

[Алексей Ярков]

Так молча )) Взять и обработать событие формы submit. Например так: https://learn.javascript.ru/forms-submit

Comments

[Константин Теплоухов]

А если без добавления onsubmit в вёрстку ?
Что-то вроде получаем форму let form = document.querySelector('#idForm'); и там уже вешаем событие или ещё что

[Алексей Ярков]

Константин Теплоухов, ну вы сами почти весь код и написали уже ))

[Константин Теплоухов]

Алексей Ярков,

document.querySelector('#idForm').addEventListener('submit', _ => {
        alert('Тест');
    });

Спасибо

Answer 2

[artem rodionov]

Если вы хотите отловить отправку формы не только по нажатию кнопки, но и при нажатии клавиши Enter, вы можете использовать событие "submit" формы и проверить код клавиши события для определения, была ли нажата клавиша Enter. Вот пример кода на ванильном JavaScript:

```javascript
document.addEventListener('DOMContentLoaded', function() {
var form = document.getElementById('myForm'); // Замените 'myForm' на ID вашей формы

form.addEventListener('submit', function(event) {
event.preventDefault(); // Предотвращаем отправку формы по умолчанию

// Выполняйте здесь вашу обработку данных формы перед отправкой

// Пример обработки данных:
var formData = new FormData(form);
var data = {};

for (var pair of formData.entries()) {
data[pair[0]] = pair[1];
}

console.log(data); // Выводим данные формы в консоль (пример)

// Отправляем данные на сервер (AJAX-запрос или другой метод)

// Очищаем форму
form.reset();
});

form.addEventListener('keydown', function(event) {
if (event.key === 'Enter') {
form.dispatchEvent(new Event('submit')); // Имитируем событие submit при нажатии клавиши Enter
}
});
});
```

В этом примере мы добавляем обработчик события "submit" на форму и предотвращаем ее отправку по умолчанию с помощью `event.preventDefault()`. Затем вы можете выполнять вашу обработку данных формы и отправлять данные на сервер. Также мы добавляем обработчик события "keydown" на форму, и если нажата клавиша Enter, мы вызываем событие "submit" формы.

Примечание: Замените `'myForm'` в коде на ID вашей формы, которую вы хотите отслеживать.