Форми: подія та метод submit

Подія submit ініціюється, коли форма надсилається. Зазвичай це використовується для перевірки форми перед відправкою на сервер або щоб запобігти Ñ—Ñ— відправленню та обробці в JavaScript.

Метод form.submit() дозволяє ініціювати відправку форми за допомогою JavaScript. Ми можемо використовувати його для динамічного створення та надсилання власних форм на сервер.

Давайте розглянемо їх докладніше.

Подія: submit

Існує два основних способи надіслати форму:

1. Перший – клікнути <input type="submit"> або <input type="image">.
2. Другий – натиснути Enter у полі введення.

Обидві дії призводять до події submit у формі. Обробник може перевірити дані, Ñ– якщо Ñ” помилки, показати Ñ—Ñ… Ñ– викликати event.preventDefault(), тоді форму не буде відправлено на сервер.

У формі нижче:

1. Перейдіть у текстове поле і натисніть Enter.
2. Клікніть <input type="submit">.

Обидві дії показують alert, Ñ– форма нікуди не надсилається через return false:

<form onsubmit="alert('Надіслати!');return false">
  Перший приклад: натисніть Enter <input type="text" value="Текст"><br>
  Другий приклад: клікніть "Надіслати": <input type="submit" value="Надіслати">
</form>

<form onsubmit="return false">
 <input type="text" size="30" value="Сфокусуйтеся тут і натисніть Enter">
 <input type="submit" value="Надіслати" onclick="alert('Клік')">
</form>

Метод: submit

Щоб надіслати форму на сервер вручну, ми можемо викликати form.submit().

Тоді подія submit не генерується. Передбачається, що якщо програміст викликає form.submit(), то сценарій вже здійснив всю пов’язану обробку.

Іноді це використовується для створення та надсилання форми вручну, наприклад:

let form = document.createElement('form');
form.action = 'https://google.com/search';
form.method = 'GET';

form.innerHTML = '<input name="q" value="Тест">';

// форма повинна бути в документі, щоб її надіслати
document.body.append(form);

form.submit();