JavaScript может делать с формами почти всё, что угодно. Единственное, что он не может — это самостоятельно заполнять поля <input type="file">, без инициативы пользователя.
Наиболее частое применение — это валидация (проверка) формы перед отправкой. Для неё существует событие submit.
Событие submit
Чтобы отправить форму на сервер, у посетителя есть два способа:
- Первый — это нажать кнопку
<input type="submit">или<input type="image">. - Второй — нажать Enter на поле, когда оно в фокусе.
В обоих случаях будет сгенерировано событие submit. Если отменить в нём действие браузера, то форма не отправится на сервер.
Как правило, это используется для проверке данных в форме. Если что-то не так — выводится ошибка и отправка отменяется.
Посмотрим это на живом примере. Оба способа выдадут сообщение, форма не будет отправлена:
<form onsubmit="alert('submit!');return false">
Первый: Enter в текстовом поле <input type="text" value="Текст"><br>
Второй: Нажать на "Отправить": <input type="submit" value="Отправить">
</form>
</button>
Ожидаемое поведение:
- Перейдите в текстовое поле и нажмите Enter, будет событие, но форма не отправится на сервер благодаря
return falseв обработчике. - То же самое произойдет при клике на
<input type="submit">.
submit и click
При отправки формы путём нажатия Enter, на элементе <input type="submit"> везде, кроме IE<9, генерируется событие click.
Это довольно забавно, учитывая что клика-то и не было.
<form onsubmit="alert('submit');return false">
<input type="text" size="30" value="Нажми здесь Enter">
<input type="submit" value="Submit" *!*onclick="alert('click')"*/!*>
</form>
submit не всплываетВ IE<9 событие submit не всплывает. Впрочем, если вешать обработчик submit на сам элемент формы, без использования делегирования, то это не создаёт проблем.
Метод submit
Чтобы отправить форму на сервер из JavaScript — нужно вызвать на элементе формы метод form.submit().
При этом само событие submit не генерируется. Предполагается, что если программист вызывает метод form.submit(), то он выполнил все проверки.
Это используют, в частности, для искусственной генерации и отправки формы.
Создайте функцию showPrompt(text, callback), которая выводит форму для ввода с сообщением text и кнопками ОК/Отмена.
- При отправке формы (OK/ввод в текстовом поле) — должна вызываться функция
callbackсо значением поля. - При нажатии на
Отменаили на клавишу Esc — должна вызываться функцияcallback(null). Клавиша Esc должна закрывать форму всегда, даже если поле для ввода сообщения не в фокусе.
Особенности реализации:
- Форма должна показываться по горизонтали — в центре, по вертикали — на 150px от верхней границы окна.
- При показе формы остальные элементы страницы использовать нельзя, не работают другие кнопки и т.п, это окно — модальное.
- При показе формы фокус должен переходить на текстовый элемент для ввода.
- DOM-структура формы должна содержаться в HTML/CSS, чтобы её было легко менять и стилизовать.
Пример использования:
showPrompt("Введите что-нибудь", function(value) {
alert(value);
});
Открыть в новом окне: (нажмите там на кнопку) tutorial/form/prompt/index.html.
Разбейте решение на этапы:
- Создайте HTML/CSS для формы. Позиционируйте форму при помощи CSS.
- Решите задачу как сделать форму модальной.
- Напишите общее решение с обработчиками.
Модальное окно делается путём добавления к документу DIV, полностью перекрывающего документ и имеющего больший z-index.
В результате все клики будут доставаться этому DIV'у:
Стиль:
#cover-div {
width: 100%;
height: 100%;
z-index: 9000;
position: absolute;
top: 0; left: 0;
opacity: 0.1;
background-color: gray;
filter: alpha(opacity=10);
}
Самой форме нужно, естественно, дать еще больший z-index, чтобы она была над DIV'ом.
Решение: tutorial/form/prompt/index.html.
Комментарии
- Приветствуются комментарии, содержащие дополнения и вопросы по статье, и ответы на них.
- Если ваш комментарий касается задачи -- откройте её в отдельном окне и напишите там.
- Комментарии без смысла, с рекламой или не о статье вообще - удаляются.