Отправка формы: событие и метод submit
При отправке формы срабатывает событие submit , оно обычно используется для проверки (валидации) формы перед её отправкой на сервер или для предотвращения отправки и обработки её с помощью JavaScript.
Метод form.submit() позволяет инициировать отправку формы из JavaScript. Мы можем использовать его для динамического создания и отправки наших собственных форм на сервер.
Давайте посмотрим на них подробнее.
Событие: submit
Есть два основных способа отправить форму:
- Первый – нажать кнопку <input type="submit"> или <input type="image"> .
- Второй – нажать Enter , находясь на каком-нибудь поле.
Оба действия сгенерируют событие submit на форме. Обработчик может проверить данные, и если есть ошибки, показать их и вызвать event.preventDefault() , тогда форма не будет отправлена на сервер.
- Перейдите в текстовое поле и нажмите Enter .
- Нажмите <input type="submit"> .
Оба действия показывают alert и форма не отправится благодаря return false :
При отправке формы по нажатию Enter в текстовом поле, генерируется событие click на кнопке <input type="submit"> .
Это довольно забавно, учитывая что никакого клика не было.
Метод: submit
Чтобы отправить форму на сервер вручную, мы можем вызвать метод form.submit() .
При этом событие submit не генерируется. Предполагается, что если программист вызывает метод form.submit() , то он уже выполнил всю соответствующую обработку.
Иногда это используют для генерации формы и отправки её вручную, например так:
Задачи
Модальное диалоговое окно с формой
Создайте функцию showPrompt(html, callback) , которая выводит форму с сообщением ( html ), полем ввода и кнопками OK/ОТМЕНА .
- Пользователь должен ввести что-то в текстовое поле и нажать Enter или кнопку «OK», после чего должна вызываться функция callback(value) со значением поля.
- Если пользователь нажимает Esc или кнопку «ОТМЕНА», тогда вызывается callback(null) .
В обоих случаях нужно завершить процесс ввода и закрыть диалоговое окно с формой.
- Форма должна быть в центре окна.
- Форма является модальным окном, это значит, что никакое взаимодействие с остальной частью страницы невозможно, пока пользователь не закроет его.
- При показе формы, фокус должен находиться сразу внутри <input> .
- Клавиши Tab / Shift + Tab должны переключать фокус между полями формы, не позволяя ему переходить к другим элементам страницы.
P.S. HTML/CSS исходного кода к этой задаче содержит форму с фиксированным позиционированием, но вы должны сделать её модальной.
Модальное окно может быть реализовано с помощью полупрозрачного <div >, который полностью перекрывает всё окно:
Так как он перекрывает вообще всё, все клики будут именно по этому <div> .
Также возможно предотвратить прокрутку страницы, установив body.style.overflowY=’hidden’ .
Форма должна быть не внутри <div> , а после него, чтобы она не унаследовала полупрозрачность ( opacity ).
Отправка форм при помощи JavaScript
HTML формы могут декларативно отправлять HTTP-запросы. Но формы также могут подготовить HTTP-запросы для отправки с помощью JavaScript, например при помощи XMLHttpRequest . В этой статье исследуются подобные подходы.
Формы не всегда формы
В современных веб-приложениях, одностраничных приложениях и приложениях на основе фреймворков, обычно HTML-формы используются для отправки данных без загрузки нового документа при получении данных ответа. В начале поговорим о том почему это требует другого подхода.
Получение контроля над глобальным интерфейсом
Отправка стандартной HTML формы, как описывалось в предыдущей статье, загружает URL-адрес, по которому были отправлены данные, это означает, что окно браузера перемещается с полной загрузкой страницы. Если избегать полную перезагрузку страницы, можно обеспечить более плавную работу, за счёт предотвращения задержек в сети и возможных визуальных проблем (например, мерцания).
Многие современные пользовательские интерфейсы используют HTML формы только для сбора пользовательского ввода, а не для для отправки данных. Когда пользователь пытается отправить свои данные, приложение берёт контроль и асинхронно передаёт данные в фоновом режиме, обновляя только ту часть всего интерфейса пользователя, которой требуется обновление.
Асинхронная отправка произвольных данных обычно называется AJAX, что означает «Asynchronous JavaScript And XML» (Асинхронный JavaScript и XML).
Чем он отличается?
Объект XMLHttpRequest (XHR) DOM может создавать HTTP-запросы, отправлять их, и получать их результат. Исторически, XMLHttpRequest был разработан для получения и отправки XML в качестве формата обмена, который со временем был заменён на JSON. Но ни XML, ни JSON не вписываются в кодировку запроса данных формы. Данные формы ( application/x-www-form-urlencoded ) состоят из списка пар ключ/значение в кодировке URL. Для передачи бинарных данных, HTTP-запрос преобразуется в multipart/form-data .
Замечание: Сейчас Fetch API часто используется вместо XHR — это современная, обновлённая версия XHR, которая работает в похожем стиле, но имеет несколько преимуществ. Большая часть XHR-кода, которую вы увидите в этой статье можно заменить на Fetch.
Если вы управляете фронтендом (кодом, который выполняется в браузере) и бэкендом (кодом, который выполняется на стороне сервера), вы можете отправлять JSON/XML и обрабатывать их как хотите.
Но если вы хотите использовать сторонний сервис, то вам необходимо отправлять данные в формате, который требуется сервису.
Так как нам следует отправлять подобные данные? Ниже описаны различные необходимые вам техники.
Отправка данных формы
Есть три способа отправки данных формы:
- Создание XMLHttpRequest вручную.
- Использование самостоятельного FormData объекта.
- Использование FormData связанного с <form> элементом.
Давайте рассмотрим их подробнее:
Создание XMLHttpRequest вручную
XMLHttpRequest это самый безопасный и надёжный способ создавать HTTP-запросы. Для отправки данных формы с помощью XMLHttpRequest , подготовьте данные с помощью URL-кодирования, и соблюдайте специфику запросов данных формы.
Посмотрите на пример:
И на JavaScript:
Note: This use of XMLHttpRequest is subject to the same-origin policy (en-US) if you want to send data to a third party web site. For cross-origin requests, you’ll need CORS and HTTP access control.
Using XMLHttpRequest and the FormData object
Building an HTTP request by hand can be overwhelming. Fortunately, the XMLHttpRequest specification provides a newer, simpler way to handle form data requests with the FormData (en-US) object.
The FormData (en-US) object can be used to build form data for transmission, or to get the data within a form element to manage how it’s sent. Note that FormData (en-US) objects are «write only», which means you can change them, but not retrieve their contents.
Using this object is detailed in Using FormData Objects, but here are two examples:
Using a standalone FormData object
You should be familiar with that HTML sample. Now for the JavaScript:
Here’s the live result:
Using FormData bound to a form element
You can also bind a FormData object to an <form> element. This creates a FormData object that represents the data contained in the form.
The HTML is typical:
But JavaScript takes over the form:
Here’s the live result:
You can even get more involved with the process by using the form’s elements property to get a list of all of the data elements in the form and manually manage them one at a time. To learn more about that, see the example in Accessing the element list’s contents в HTMLFormElement.elements.
Dealing with binary data
If you use a FormData (en-US) object with a form that includes <input type=»file»> widgets, the data will be processed automatically. But to send binary data by hand, there’s extra work to do.
There are many sources for binary data, including FileReader , Canvas , and WebRTC. Unfortunately, some legacy browsers can’t access binary data or require complicated workarounds. To learn more about the FileReader API, see Using files from web applications.
The least complicated way of sending binary data is by using FormData (en-US)‘s append() method, demonstrated above. If you have to do it by hand, it’s trickier.
In the following example, we use the FileReader API to access binary data and then build the multi-part form data request by hand:
As you see, the HTML is a standard <form> . There’s nothing magical going on. The «magic» is in the JavaScript:
Here’s the live result:
Conclusion
Depending on the browser and the type of data you are dealing with, sending form data through JavaScript can be easy or difficult. The FormData (en-US) object is generally the answer, and you can use a polyfill for it on legacy browsers.
Формы и javascript. FORM
Сейчас мы поговорим о различных приемах работы сценариев JavaScript с HTML-формами.
Если в HTML-документе определена форма, то она доступна сценарию JavaScript как объект, входящий в объект document с именем, заданным атрибутом NAME тега FORM .
Свойства форм
Форма имеет два набора свойств, состав одного из которых фиксированный, а состав другого зависит от того, какие элементы определены в форме.
Свойства первого набора
- action. Значение атрибута ACTION тега FORM .
- encoding. Значение атрибута ENCTYPE тега FORM .
- method. Значение атрибута METHOD тега FORM .
- target. Значение атрибута TARGET тега FORM .
- elements. Массив всех элементов формы.
- length. Размер массива elements.
Большинство свойств первого набора просто отражает значение соответствующих атрибутов тега FORM . Что же касается массива elements , то в нем находятся объекты, соответствующие элементам, определенным в форме. Эти объекты образуют второй набор свойств формы. Адресоваться к этим объектам можно как к элементам массива elements , причем первому элементу формы будет соответствовать элемент с индексом 0, второму — с индексом 1 и т.д. Однако удобнее обращаться к элементам формы по их именам, заданным атрибутом NAME .
Элементы форм
Кнопки (BUTTON, RESET, SUBMIT)
Свойства
- name. Имя объекта.
- value. Надпись на кнопке.
Метод
- click( ). Вызов этого метода тождественен щелчку мышкой по кнопке.
Пример
Нажатие кнопки
Флажок (CHECKBOX)
Свойства
- name. Имя объекта.
- value. Надпись на кнопке.
- checked. Состояние флажка: true — флажок установлен, false — флажок не установлен.
- defaultChecked. Отражает наличие атрибута CHECKED : true — есть, false — нет.
Метод
- click( ). Вызов этого метода меняет состояние флажка.
Пример
Метод click флажка
Переключатель (RADIO)
Свойства
- name. Имя объекта.
- value. Надпись на кнопке.
- length. Количество переключателей в группе.
- checked. Состояние переключателя: true — переключатель включен, false — выключен.
- defaultChecked. Отражает наличие атрибута CHECKED : true — есть, false — нет.
Метод
- click( ). Вызов этого метода включает переключатель.
Так как группа переключателей имеет одно имя NAME , то к переключателям надо адресоваться как к элементам массива.
Пример
Метод click группы переключателей
Список (SELECT)
Свойства
- name. Имя объекта.
- selectedIndex. Номер выбранного элемента или первого среди выбранных (если указан атрибут MULTIPLE ).
- length. Количество элементов (строк) в списке.
- options. Массив элементов списка, заданных тегами OPTION .
- value. Значение атрибута VALUE .
- text. Текст, указанный после тега OPTION .
- index. Индекс элемента списка.
- selected. Присвоив этому свойству значение true , можно выбрать данный элемент.
- defaultSelected. Отражает наличие атрибута SELECTED : true — есть, false — нет.
Методы
- focus( ). Передает списку фокус ввода.
- blur( ). Отбирает у списка фокус ввода.
Пример
Работа с готовым списком
Кроме работы с готовыми списками JavaScript может заполнять список динамически. Для записи нового элемента списка используется конструктор Option c четырьмя параметрами, первый из которых задает текст, отображаемый в списке, второй — значение элемента списка, соответствующее значению атрибута VALUE , третий соответствует свойству defaultSelected , четвертый — свойству selected .
Пример
Динамическое заполнение списка
Поле ввода (TEXT)
Свойства
- name. Имя объекта.
- defaultValue. Начальное содержимое поля.
- value. Текущее содержимое поля.
Методы
- focus( ). Передает полю фокус ввода.
- blur( ). Отбирает у поля фокус ввода.
- select( ). Выделяет содержимое поля.
Пример
Заполните анкету
Обратите внимание на то, что символы фамилии и имени при потере фокуса соответствующими полями преобразуются в прописные. Для этого используется метод toUpperCase , определенный во встроенном классе строк.
Текстовая область (TEXTAREA)
Свойства
- name. Имя объекта.
- defaultValue. Начальное содержимое области.
- value. Текущее содержимое области.
Методы
- focus( ). Передает области фокус ввода.
- blur( ). Отбирает у области фокус ввода.
- select( ). Выделяет содержимое области.
Пример
Отправьте телеграмму
Для установки курсора в определенное место textarea-области используйте следующую кросбраузерную функцию:
Поле ввода пароля (PASSWORD)
Свойства
- name. Имя объекта.
- defaultValue. Начальное содержимое поля.
- value. Текущее содержимое поля.
Методы
- focus( ). Передает полю фокус ввода.
- blur( ). Отбирает у поля фокус ввода.
- select( ). Выделяет содержимое поля.
Пример
Регистрация
Как я могу использовать select box как навигационное меню?
При использовании простого JavaScript, вы можете использовать select box для передвижения по сайту. Рассмотрите этот пример: Просто сохраните URL различных страниц в option value. Обработчик события OnChange вызовет перенаправление расположения, когда значение в поле изменено.
Вы могли бы использовать этот код, чтобы изменить расположение другого фрейма изменением ‘self.location =’ на ‘top.framename.location =‘
Как я могу использовать картинку для кнопки submit?
Часто возникает вопрос: «Как инициировать форму по картинке, а не по кнопке submit?» Решение столь же просто, как этот пример: Когда нажимается любая кнопка, форма инициируется и координаты x/y щелчка мыши на кнопке загружаются в объект запроса. Например, если пользователь выбрал Cancel!, объект запроса будет содержать переменные cancel.x и cancel.y. Точно так же щелчок на Continue привел бы к переменным continue.x и continue.y.
Здесь важно отметить, что элементы .x и .y — не переменные объектов continue или cancel, а фактически часть имени «continue.x». Следовательно, нельзя использовать типичный метод для определения существования одного из дочерних объектов запроса: Тем не менее рассмотрите это: Благодаря названным массивам JavaScript, можно проверить какая картинка инициировала форму.
Для некоторых приложений, полезно знать координаты курсора на нажатой картинке. Эта информация, конечно, содержится в парах image_element.x и image_element.y. Следующий серверный JavaScript мог бы использоваться для этого:
Передача данных между формами на различных страницах
В качестве простого примера, предположите, что ваша «домашняя» страница запрашивает имя пользователя, затем использует это имя, чтобы обратиться к пользователю на следующих страницах. Вы можете взять имя, используя форму, затем использовать JavaScript для передачи имени пользователя в следующую страницу, используя URL. Последующая страница могла бы затем анализировать имя пользователя из URL, используя информацию в document.search.
home.html
next.html
Почему document.formName.selectObject.value не отражает значение выбранного пункта в списке?
Потому что объект работает не таким образом. Правильный и полный синтаксис для доступа к VALUE только что выбранным полем в списке — это: Для доступак тексту элемента используйте свойство text:
Как мне получить значение выбранной в данный момент radio button в radio group или группе checkboxes?
Существует свойство, созданное в объекте form для каждой radio buttons или checkboxes с тем же самым именем. Например, следующий HTML код: приводит к созданию 3-х элементов массива, вызываемых с помощью document.theForm.gender. Чтобы определить значение выбранной кнопки (или checkbox’а), вам нужно проверить свойство checked каждого из элементов. Например:
Для получения и установки значения radio button value на javascript можно использовать следующие функции:
Как мне получить форму, чтобы инициировать процесс запуска клавишей Enter?
Форма отправляется, если нажата клавиша enter, в то время как единственный входной текстовый элемент формы имеет фокус. Вы можете вызывать подобное поведение в форме, имеющей более одного элемента, разбивая форму на ряд отдельных форм, так, чтобы каждая форма имела только один текстовый элемент. Используйте обработчик события onSubmit (или action ) для накопления данных из других форм в вашей странице и инициируйте их все сразу.
Как я могу отключить поле текстового ввода?
Используйте обработчик onfocus для вызова функции blur(): Если вы хотите динамически отключать/включать поле, используйте функцию skip (e)
Как сделать загрузку страницы при выборе флажка?
Используйте обработчик OnChange для вызова функции submit():
Сохранение данных в локальное хранилище браузера:
sessionStorage — запоминает результат пока открыт сайт во вкладке(окне), можно свободно перемещаться по сайту, обновлять страницы, но не закрывать окно браузера(вкладку).
localStorage — запоминает результат на очень долгое время, пока пользователь не очистит локальное хранилище браузера. Можно через несколько дней зайти на сайт и увидеть ранее заполненную форму.