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('Поле не може бути порожнім');
}
});
У цьому прикладі перевіряється, чи не залишилося поле порожнім, перед тим як дозволити відправку форми. Якщо воно порожнє, форму не буде відправлено, і користувачу буде показано попередження.
| Порада: | Якщо вам потрібно зробити форму інтерактивною та уникнути перезавантаження сторінки, використовуйте |
| Порада: | Валідація форми може бути зручною за допомогою події |
| Порада: | Подія |
Синтаксис
form.addEventListener('submit', function(event) {
// код обробки події
});Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
66 |
57 |
11.1 |
53 |
16 |
| Переглядач | ||||
|---|---|---|---|---|
66 |
66 |
57 |
11.3 |
| Переглядач | ||
|---|---|---|
15.0.0 |
1.0 |
Приклади
Користувач заповнює форму з полями для імені та email, і при натисканні кнопки "Submit" проводиться перевірка, чи всі поля заповнені. Якщо поля не заповнені, виводиться повідомлення про помилку. Якщо форма заповнена коректно, відбувається симуляція відправки через AJAX, і через деякий час показується повідомлення про успішну відправку разом із введеними даними.
У цьому прикладі форма відправляється через fetch() замість стандартного механізму відправки форми. Це дозволяє відправляти форму без перезавантаження сторінки і динамічно обробляти відповідь від сервера.
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);
});
});У цьому прикладі здійснюється перевірка валідності поля для email перед відправкою форми. Якщо поле некоректне, відправка блокується і показується повідомлення, а при правильному введенні даних форма відправляється. Це дозволяє створювати інтерактивні форми з гнучкою валідацією.
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(); // Ручне відправлення форми після успішної валідації
});