Отправка формы: событие и метод 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 ).
How to Submit a Form with JavaScript – JS Submit Button Example
Joel Olawanle
When building applications and websites on the internet, you’ll sometimes need your users to supply information by filling out a form.
But then you might wonder – how do you get this data from the form? Well, you can do this with JavaScript.
In this article, you will learn how to create a form and get data from it when the form is submitted with JavaScript.
This article won’t cover how to input data into a database – it will only cover how to submit a form. But you should know that once you have this data, you can send it to the database of your choice, use it to manipulate information, and much more.
To submit a form using JavaScript, you must first create the form and add distinctive, specific attributes to the input fields. You will use these attributes to retrieve the data when the user submits and then calls a function to handle validations (possibly if any data is submitted).
How to Create the HTML Form
To get started, let’s create a basic HTML form with two fields: username and password. We’ll also add a button that will be used to submit the form and trigger a JavaScript action.
To get this form’s data via JavaScript, you’ll need to attach specific attributes to the form input field and the form itself. These attributes can be an id , a class , or even with the name tag. This will help get the data in JavaScript using their document methods.
For example, if you use an id attribute on your input field, you can access the input field data and other values using the document method getElementByID(‘idName’) :
If you use a class attribute, you’ll use getElementsByClassName(className) , which returns an array of all elements with the className . If it is only one element, you can use the index number 0 to access its data:
If you use the name attribute, you’ll use getElementsByName(name) . This is similar to how the class attribute works since it also returns an array which you can loop through or access with its index number:
Note: This will not return the input value but the input element itself.
How to Submit a Form with JavaScript
The first step is to attach your preferred attribute to the form, which you can use to track when the form is submitted. This can be an id , class or name attribute, but for this article, I will use id for the form and input fields:
At this point, you can now handle form submission with JavaScript. You first get the form with your preferred attribute, which can be an id, and store it in a variable:
Then you can attach the addEventListener to the form variable and listen for a submit event. This event listener allows you to attach a callback function which gets triggered once the form is submitted:
At this point, you can now get the form data and handle any operation you wish. For this article, let’s first validate the data by checking if the input is empty before performing any operation:
This is the entire JavaScript code:
Conclusion
In this article, you have learned how to submit a form with JavaScript and how it works with the various DOM methods.
There are other ways you can do this, but this is a straightforward way to handle submission in JavaScript.
You can access over 150 of my articles by visiting my website. You can also use the search field to see if I’ve written a specific article.
Способы отправки форм в JavaScript
Вы уже знаете, что форма отправляется по нажатию на кнопку. Здесь, однако, есть нюансы. Кнопка обязательно должна иметь атрибут type в значении submit :
Форму также будет отправлять тег button с атрибутом type в значении submit :
Форму также будет отправлена, если в любом из инпутов поставить фокус и нажать Enter .
Кнопки без отправки
Кнопка с атрибутом type в значении button используется как элемент страницы и отправлять форму не будет:
Аналогичным образом будет работать тег button :
Кнопки сброса
Кнопка с атрибутом type в значении reset будет очищать заполненную форму:
Отправка формы через JavaScript
Можно принудительно отправить форму через JavaScript. Давайте посмотрим, как это делается. Пусть у нас есть форма и некоторая кнопка, по клику на которую мы хотим отправлять форму:
Получим ссылки на наши элементы в переменные:
Повестим на кнопку обработчик клика:
По клику на кнопку выполним отправку формы через метод submit :
Дана форма с тремя инпутами. Сделайте ссылку, по клику на которую будет происходить отправка этой формы.
Форма отправки JavaScript при нажатии
В этом руководстве будет обсуждаться, как отправить форму с помощью функции submit() в JavaScript.
Отправьте форму, щелкнув ссылку и используя функцию submit() в JavaScript
В JavaScript вы можете создать форму, используя тег form , вы можете дать форме идентификатор, используя атрибут id , и после этого вы должны выбрать метод для отправки вашей формы, например, вы можете отправить форму при нажатии ссылки или кнопки. Теперь есть два метода отправки формы, и вы можете сделать это либо внутри HTML-кода, используя атрибут onclick , либо внутри JavaScript. Например, давайте отправим форму внутри HTML, используя атрибут onclick . См. Код ниже.
Вы можете изменить идентификатор form и идентификатор ссылки в приведенном выше коде в соответствии с вашими требованиями. Этот метод не рекомендуется, поскольку вы смешиваете HTML с кодом JavaScript. Вы также можете сделать это отдельно в JavaScript, используя идентификатор формы и ссылки. Например, давайте проделаем вышеуказанную операцию, используя отдельный JavaScript. См. Код ниже.
Этот метод рекомендуется, поскольку HTML и JavaScript находятся в отдельных файлах. Обратите внимание, что вы должны использовать идентификатор формы и идентификатор ссылки, которые вы определили в HTML, чтобы получить эти элементы в JavaScript. Форма будет отправлена при нажатии на ссылку.
Отправьте форму, нажав кнопку и используя функцию submit() в JavaScript
Вы можете использовать кнопку для отправки формы. Существует два метода отправки формы, и вы можете сделать это либо внутри HTML-кода, используя атрибут onclick , либо внутри JavaScript. Например, давайте отправим форму внутри HTML, используя атрибут onclick . См. Код ниже.
Подобно описанному выше методу, этот метод не рекомендуется, поскольку вы смешиваете HTML с кодом JavaScript. Проделаем описанную выше операцию, используя отдельный JavaScript.