30 січня 2022 р.

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

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

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

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

Подія: submit

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

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

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

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

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

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

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

Коли форма надсилається за допомогою Enter у полі введення, запускається подія click на <input type="submit">.

Це досить смішно, тому що кліку взагалі не було.

Ось демо:

          <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();

Завдання

Модальна форма

Створіть функцію showPrompt(html, callback), яка показує форму з повідомленням html, полем введення та кнопками OK/СКАСУВАТИ.

Користувач повинен ввести щось у текстове поле і натиснути Enter або кнопку ОК, після чого буде викликано callback(value) з введеним значенням.
В іншому випадку, якщо користувач натискає Esc або СКАСУВАТИ, тоді викликається callback(null).

В обох випадках це завершує процес введення та видаляє форму.

Вимоги:

Форма повинна знаходитися в центрі вікна.
Форма – це модальне вікно. Іншими словами, жодна взаємодія з іншою частиною сторінки неможлива, поки користувач не закриє її.
Коли відображається форма, фокус має бути всередині <input> для користувача.
Клавіші Tab/Shift+Tab повинні зміщувати фокус між полями форми, не дозволяючи йому залишати форму і переходити на інші елементи сторінки.

Приклад використання:

          showPrompt("Введіть щось<br>...розумне :)", function(value) {
  alert(value);
});
        

Демо в iframe:

P.S. У вихідному документі є HTML/CSS для форми з фіксованим позиціонуванням, але ви можете зробити її модальною.

Відкрити пісочницю для завдання.

Модальне вікно можна реалізувати за допомогою напівпрозорого `

, який охоплює все вікно, наприклад:

          #cover-div {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9000;
  width: 100%;
  height: 100%;
  background-color: gray;
  opacity: 0.3;
}
        

Оскільки <div> перекриває всі елементи, то саме він отримує всі кліки.

Також ми можемо запобігти прокручуванню сторінки, налаштувавши body.style.overflowY='hidden'.

Форма повинна бути не в <div>, а поряд з ним, тому що ми не хочемо, щоб вона мала opacity.

Відкрити рішення в пісочниці.

Навчальна карта

Коментарі

прочитайте це, перш ніж коментувати…