JS властивість Array.submit

Загальний опис

Подія submit спрацьовує, коли користувач надсилає форму на сервер, натискаючи кнопку "submit" або використовуючи клавішу Enter у текстовому полі. Ця подія виникає на елементі форми <form>, і її можна використовувати для перехоплення дії відправки, перевірки або обробки даних перед їхнім надсиланням на сервер.

Подія submit дозволяє розробникам валідовувати введені дані або модифікувати їх перед відправкою, а також може бути використана для відправки даних через AJAX, без необхідності перезавантаження сторінки. У типовому випадку подія submit призводить до перезавантаження сторінки після відправки форми, але цю поведінку можна скасувати, викликавши метод event.preventDefault().

Наприклад, ось простий спосіб відстежити подію submit:

const form = document.querySelector('form');

form.addEventListener('submit', function(event) {
  event.preventDefault(); // Запобігаємо стандартній поведінці
  console.log('Форма була відправлена, але без перезавантаження сторінки.');
});

У цьому прикладі форма не буде насправді відправлена на сервер, тому що використовується preventDefault(), але ми можемо обробити її дані без перезавантаження сторінки.

Крім того, подія submit може бути корисною для валідації полів форми перед її відправкою. Наприклад, можна перевірити, чи всі обов'язкові поля заповнені, і тільки після цього дозволити відправку.

form.addEventListener('submit', function(event) {
  const input = document.querySelector('input');
  
  if (input.value === '') {
    event.preventDefault();
    alert('Поле не може бути порожнім');
  }
});

У цьому прикладі перевіряється, чи не залишилося поле порожнім, перед тим як дозволити відправку форми. Якщо воно порожнє, форму не буде відправлено, і користувачу буде показано попередження.

правити

Порада

Якщо вам потрібно зробити форму інтерактивною та уникнути перезавантаження сторінки, використовуйте event.preventDefault() разом із відправкою даних через JavaScript (наприклад, через fetch() або XMLHttpRequest).

автор: Bond правити

Порада

Валідація форми може бути зручною за допомогою події submit, оскільки ви можете перевіряти дані перед відправкою і, за необхідності, блокувати її. Це допомагає уникати зайвих запитів на сервер і підвищує якість введених даних.

автор: Bond правити

Порада

Подія submit дозволяє вам контролювати потік відправки форми і за необхідності перенаправляти її на інші ресурси або API, наприклад, для інтеграції з різними сервісами, не оновлюючи сторінку.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

form.addEventListener('submit', function(event) {
  // код обробки події
});

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	66	57	11.1	53	16

Підтримка: мобільні переглядачі

Переглядач
	66	66	57	11.3

Підтримка: серверні переглядачі

Переглядач
	15.0.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

<form>
    <label>Ім'я: <input type="text" name="name"></label>
    <button type="submit">Надіслати</button>
</form>

const form = document.querySelector('form');

form.addEventListener('submit', function(event) {
  event.preventDefault(); // Запобігаємо перезавантаженню сторінки

  const formData = new FormData(form);
  
  fetch('/submit', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(data => {
    console.log('Форма успішно відправлена:', data);
  })
  .catch(error => {
    console.error('Сталася помилка:', error);
  });
});

<form>
    <label>Ім'я: <input type="text" name="name"></label>
    <button type="submit">Надіслати</button>
</form>

const form = document.querySelector('form');

form.addEventListener('submit', function(event) {
  event.preventDefault(); // Запобігаємо відправці
  
  const emailField = document.querySelector('input[name="email"]');
  const emailValue = emailField.value;

  if (!emailValue.includes('@')) {
    alert('Будь ласка, введіть коректний email.');
    return;
  }

  // Якщо валідація пройшла, відправляємо дані
  console.log('Форма пройшла валідацію. Відправка даних...');
  form.submit(); // Ручне відправлення форми після успішної валідації
});