Формы: отправка, событие и метод submit

Событие submit возникает при отправке формы. Наиболее частое его применение – это валидация (проверка) формы перед отправкой.

Метод submit позволяет инициировать отправку формы из JavaScript, без участия пользователя. Далее мы рассмотрим детали их использования.

Событие submit

Чтобы отправить форму на сервер, у посетителя есть два способа:

  1. Первый – это нажать кнопку <input type="submit"> или <input type="image">.
  2. Второй – нажать Enter, находясь на каком-нибудь поле.

Какой бы способ ни выбрал посетитель – будет сгенерировано событие submit. Обработчик в нём может проверить данные и, если они неверны, то вывести ошибку и сделать event.preventDefault() – тогда форма не отправится на сервер.

Например, в таком HTML оба способа выведут alert, форма не будет отправлена:

<form onsubmit="alert('submit!');return false">
  Первый: Enter в текстовом поле <input type="text" value="Текст"><br>
  Второй: Нажать на "Отправить": <input type="submit" value="Отправить">
</form>

Ожидаемое поведение:

  1. Перейдите в текстовое поле и нажмите Enter, будет событие, но форма не отправится на сервер благодаря return false в обработчике.
  2. То же самое произойдет при клике на <input type="submit">.
Взаимосвязь событий submit и click

При отправке формы путём нажатия Enter на текстовом поле, на элементе <input type="submit"> везде, кроме IE8-, генерируется событие click.

Это довольно забавно, учитывая что клика-то и не было.

<form onsubmit="alert('submit');return false">
 <input type="text" size="30" value="При нажатии Enter будет click">
 <input type="submit" value="Submit" onclick="alert('click')">
</form>
В IE8- событие submit не всплывает

В IE8- событие submit не всплывает. Нужно вешать обработчик submit на сам элемент формы, без использования делегирования.

Метод submit

Чтобы отправить форму на сервер из JavaScript – нужно вызвать на элементе формы метод form.submit().

При этом само событие submit не генерируется. Предполагается, что если программист вызывает метод form.submit(), то он выполнил все проверки.

Это используют, в частности, для искусственной генерации и отправки формы.

Задачи

важность: 5

Создайте функцию showPrompt(text, callback), которая выводит форму для ввода с сообщением text и кнопками ОК/Отмена.

  • При отправке формы (OK/ввод в текстовом поле) – должна вызываться функция callback со значением поля.
  • При нажатии на Отмена или на клавишу Esc – должна вызываться функция callback(null). Клавиша Esc должна закрывать форму всегда, даже если поле для ввода сообщения не в фокусе.

Особенности реализации:

  • Форма должна показываться в центре окна (и оставаться в центре при изменении его размеров, а также при прокрутке окна!).
  • Текст может состоять из нескольких строк, возможен любой HTML
  • При показе формы остальные элементы страницы использовать нельзя, не работают другие кнопки и т.п, это окно – модальное.
  • При показе формы – сразу фокус на INPUT для ввода.
  • Нажатия Tab/Shift+Tab переключают в цикле только по полям формы, они не позволяют переключиться на другие элементы страницы.

Пример использования:

showPrompt("Введите что-нибудь<br>... умное :)", function(value) {
  alert( value );
});

Демо в ифрейме:

Исходный HTML/CSS для формы с готовым fixed-позиционированием – в песочнице.

Открыть песочницу для задачи.

Модальное окно делается путём добавления к документу DIV, полностью перекрывающего документ и имеющего больший z-index.

В результате все клики будут доставаться этому DIV'у:

Стиль:

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

Самой форме можно дать еще больший z-index, чтобы она была над DIV'ом. Мы не помещаем форму в контейнер, чтобы она не унаследовала полупрозрачность.

Открыть решение в песочнице.

важность: 3

Напишите функцию validate(form), которая проверяет содержимое формы по клику на кнопку «Проверить».

Ошибки:

  1. Одно из полей не заполнено.
  2. Пароли не совпадают.

Ошибка должна сопровождаться сообщением у поля. Например:

Открыть песочницу для задачи.

Карта учебника

Комментарии

перед тем как писать…
  • Приветствуются комментарии, содержащие дополнения и вопросы по статье, и ответы на них.
  • Для одной строки кода используйте тег <code>, для нескольких строк кода — тег <pre>, если больше 10 строк — ссылку на песочницу (plnkr, JSBin, codepen…)
  • Если что-то непонятно в статье — пишите, что именно и с какого места.