Прослушивание событий отправки формы в JavaScript без изменения HTML

В этой статье мы решаем распространенную проблему прослушивания событий отправки формы без необходимость изменения HTML-кода. Вместо использования атрибутов onClick или onSubmit в HTML мы предоставляем решение на чистом JavaScript.

Для достижения этой цели мы используем метод EventTarget.addEventListener. Этот метод позволяет нам зарегистрировать функцию обратного вызова, которая будет выполняться при возникновении определенного события в элементе формы.

var ele = /*Your Form Element*/;
if (ele.addEventListener) {
  ele.addEventListener("submit", callback, false); // Modern browsers
} else if (ele.attachEvent) {
  ele.attachEvent('onsubmit', callback); // Old IE
}

Замените «ele» ссылкой на ваш элемент формы и «обратный вызов» функцией, которую вы хотите выполнить при отправке формы.

Чтобы предотвратить собственное поведение отправки формы (т. е. , обновляя страницу), используйте метод .preventDefault() в вашей функции обратного вызова:

document.querySelector("#myForm").addEventListener("submit", function (e) {
  if (!isValid) {
    e.preventDefault(); // Stop form from submitting
  }
});

Прослушивание событий отправки с помощью библиотек

Хотя это и не обязательно, вы можете предпочесть использовать библиотеку для прослушивания событий отправки. Вот как это можно сделать с помощью общих библиотек:

jQuery

$(ele).submit(callback);

Пример

[jsfiddle.net/DerekL/wnbo1hq0/show](http://jsfiddle.net/DerekL/wnbo1hq0/show)

Используя эти методы, вы можете легко прослушивать события отправки формы в JavaScript, не касаясь HTML-кода.