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

При отправке формы срабатывает событие submit , оно обычно используется для проверки (валидации) формы перед её отправкой на сервер или для предотвращения отправки и обработки её с помощью JavaScript.

Метод form.submit() позволяет инициировать отправку формы из JavaScript. Мы можем использовать его для динамического создания и отправки наших собственных форм на сервер.

Давайте посмотрим на них подробнее.

Событие: submit

Есть два основных способа отправить форму:

1. Первый – нажать кнопку или .
2. Второй – нажать Enter , находясь на каком-нибудь поле.

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

1. Перейдите в текстовое поле и нажмите Enter .
2. Нажмите .

Оба действия показывают alert и форма не отправится благодаря return false :

При отправке формы по нажатию Enter в текстовом поле, генерируется событие click на кнопке .

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

Метод: submit

Чтобы отправить форму на сервер вручную, мы можем вызвать метод form.submit() .

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

Иногда это используют для генерации формы и отправки её вручную, например так:

Задачи

Модальное диалоговое окно с формой

Создайте функцию showPrompt(html, callback) , которая выводит форму с сообщением ( html ), полем ввода и кнопками OK/ОТМЕНА .

• Пользователь должен ввести что-то в текстовое поле и нажать Enter или кнопку «OK», после чего должна вызываться функция callback(value) со значением поля.
• Если пользователь нажимает Esc или кнопку «ОТМЕНА», тогда вызывается callback(null) .

В обоих случаях нужно завершить процесс ввода и закрыть диалоговое окно с формой.

• Форма должна быть в центре окна.
• Форма является модальным окном, это значит, что никакое взаимодействие с остальной частью страницы невозможно, пока пользователь не закроет его.
• При показе формы, фокус должен находиться сразу внутри .
• Клавиши Tab / Shift + Tab должны переключать фокус между полями формы, не позволяя ему переходить к другим элементам страницы.

P.S. HTML/CSS исходного кода к этой задаче содержит форму с фиксированным позиционированием, но вы должны сделать её модальной.

Модальное окно может быть реализовано с помощью полупрозрачного

Так как он перекрывает вообще всё, все клики будут именно по этому

Функции EditForm, NewForm, SubmitForm, ResetForm и ViewForm в Power Apps

Просмотр, изменение или создание элемента, сохранение содержимого и сброс элементов управления в форме редактирования.

Обзор

Эти функции изменяют состояние элемента управления Edit form. Элемент управления «Форма» поддерживает следующие режимы:

Режим	Описание
FormMode.Edit	Форма заполняется значениями из существующей записи, и пользователь может изменять значения полей. Пользователь может сохранить все внесенные в запись изменения.
FormMode.New	Форма заполняется значениями по умолчанию, и пользователь может изменять значения полей. После внесения всех изменений пользователь может добавить запись в источник данных.
FormMode.View	Форма заполняется значениями из существующей записи, но пользователь не может изменять значения полей.

Описание

Эти функции обычно вызываются из формулы свойства OnSelect, определенной для элементов управления Button или Image. Они позволяют пользователю сохранить изменения, отменить изменения или создать новую запись. Вы можете объединить элементы управления и эти функции, чтобы создать законченное решение.

Эти функции не возвращают никаких значений.

SubmitForm

Используйте функцию SubmitForm в свойстве OnSelect для элемента управления «Кнопка», чтобы сохранить изменения, внесенные в источник данных через элемент управления «Форма».

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

Также SubmitForm проверяет свойство Valid для формы, которое является агрегатом свойств Valid для всех элементов управления Card, которые включены в элемент управления «Форма». Если возникает проблема, данные не передаются, а также устанавливаются соответствующие значения для свойств Error (Ошибка) и ErrorKind (Тип ошибки) в элементе управления «Форма».

Если проверка проходит успешно, SubmitForm отправляет изменения в источник данных.

• В случае успешного выполнения запускается поведение OnSuccess, определенное для формы, а также очищаются значения свойств Error (Ошибка) и ErrorKind (Тип ошибки). Если форма находилась в режиме FormMode.New, устанавливается режим FormMode.Edit.
• В случае сбоя запускается поведение OnFailure, определенное для формы, а также устанавливаются соответствующие значения свойств Error (Ошибка) и ErrorKind (Тип ошибки). Режим формы в этом случае не изменяется.

EditForm

Функция EditForm устанавливает режим FormMode.Edit для элемента управления «Форма». В этом режиме форма заполняется на основании содержимого свойства Item, установленного для элемента управления «Форма». Если в этом режиме выполняется функция SubmitForm, запись изменяется, а не создается. FormMode.Edit является режимом по умолчанию для элемента управления «Форма».

NewForm

Функция NewForm устанавливает режим FormMode.New для элемента управления «Форма». В этом режиме игнорируется содержимое элемента Item, установленное для элемента управления «Форма», и форма заполняется на основании значений по умолчанию из свойства DataSource. Если в этом режиме выполняется функция SubmitForm, запись создается, а не изменяется.

ResetForm

Функция ResetForm сбрасывает содержимое формы к начальным значениям, которые были установлены до внесения пользователем любых изменений. Если форма находится в режиме FormMode.New, устанавливается режим FormMode.Edit. Также запускается поведение OnReset, определенное для элемента управления «Форма». Можно также сбросить отдельные элементы управления с помощью функции Reset. Но это можно сделать только в форме.

ViewForm

Функция ViewForm меняет режим элемента управления «Форма» на FormMode.New. В этом режиме форма заполняется на основании содержимого свойства Item, установленного для элемента управления «Форма». Функции SubmitForm и ResetForm не работают в этом режиме.

Свойство DisplayMode

Текущий режим можно узнать с помощью свойства Режим. Режим также определяет значение свойства DisplayMode, которое могут использовать карточки данных и элементы управления в элементе управления «Форма». Часто свойству DisplayMode карточки данных присваивается значение Parent.DisplayMode (ссылается на форму), как и свойству DisplayMode элемента управления (ссылается на карточку данных):

Режим	DisplayMode	Описание
FormMode.Edit	DisplayMode.Edit	Карточки данных и элементы управления можно изменять; они принимают изменения в записи.
FormMode.New	DisplayMode.Edit	Карточки данных и элементы управления можно изменять, они принимают новые записи.
FormMode.View	DisplayMode.View	Карточки данных и элементы управления нельзя изменять, они оптимизированы для просмотра.

Синтаксис

SubmitForm( FormName )

• FormName — обязательный аргумент. Элемент управления «Форма», который отправляет данные в источник данных.

EditForm( FormName )

• FormName — обязательный аргумент. Элемент управления «Форма», который нужно перевести в режим FormMode.Edit.

NewForm( FormName )

• FormName — обязательный аргумент. Элемент управления «Форма», который нужно перевести в режим FormMode.New.

ResetForm( FormName )

• FormName — обязательный аргумент. Элемент управления «Форма», в котором нужно восстановить исходные значения. Также форма переключается из режима FormMode.New в режим FormMode.Edit.

ViewForm( FormName )

• FormName — обязательный аргумент. Элемент управления «Форма», который нужно перевести в режим FormMode.View.

Примеры

Полные примеры вы найдете в статье о формах данных.

Добавьте элемент управления «Button», задайте значение Сохранить для ее свойства Текст и задайте следующую формулу в качестве значения свойства OnSelect:

SubmitForm( EditForm )

Задайте пустое значение для свойства OnFailure элемента управления «Форма», а для свойства OnSuccess введите такую формулу:

Back()

Создайте элемент управления Label с именем ErrorText и задайте в качестве значения его свойства Текст следующую формулу:

EditForm.Error

Когда пользователь выбирает кнопку Сохранить, все внесенные в форме изменения отправляются в источник данных.

• Если отправка прошла успешно, все изменения сохраняются в существующей или новой (если элемент управления «Форма» находился в режиме New) записи. ErrorText получает пустое значение, и снова открывается предыдущий экран.
• Если возникла ошибка при передаче, ErrorText получает понятное сообщение об ошибке и остается открытым текущий экран, где пользователь может устранить проблему и повторить попытку.

Добавьте элемент управления «Button», задайте значение Отменить для ее свойства Текст и задайте следующую формулу в качестве значения свойства OnSelect:

ResetForm( EditForm ); Back()

Когда пользователь выбирает кнопку Отменить, значения в элементе управления «Форма» сбрасываются до того состояния, в котором они находились до редактирования пользователем. Снова открывается предыдущий экран, и элемент управления «Форма» переходит в режим Edit, если для него был назначен режим New.

Добавьте элемент управления «Button», задайте значение Создать для ее свойства Текст и задайте следующую формулу в качестве значения свойства OnSelect:

NewForm( EditForm ); Navigate( EditScreen, None )

Когда пользователь нажимает кнопку Создать, элемент управления «Форма» переключается в режим New и заполняется значениями по умолчанию для источника данных, назначенного этому элементу управления «Форма». После этого открывается экран, который содержит элемент управления «Форма». Теперь, когда выполняется функция SubmitForm, запись создается, а не обновляется.

Каковы ваши предпочтения в отношении языка документации? Пройдите краткий опрос (обратите внимание, что этот опрос представлен на английском языке).

Опрос займет около семи минут. Личные данные не собираются (заявление о конфиденциальности).

Submitting an HTML form without opening a new window

So I know that when you put a URL in the action of an HTML form it will send the users to that url. I also added in the target attribute target=»_blank» to open the new URL in a new window. But I want to close that window and stay on the original site where the form was submitted form. I tried to do this by naming the target window and closing it but that didn’t work out. I am wondering if there is a simple way to do this.

3 Answers 3

Here is what you need, simply adjust it to your needs, create a php file that gets called within the action and let it do what you would do with your form — exactly the same way, but stay on the same page:

You need to include jQuery to your file to use this!

As you are using GET in your form — with this submission you will get the data in your $_POST.

another solution, besides the ajax obvious one is using an inner hidden iframe as the target property of the form element. this way the form will open in a hidden inner element. e.g.:

AJAX request suggested by baao is the way to go, but it has a caveat. The browser won’t allow to pass your AJAX request if the target server is on a different domain. To solve the problem it should provide correct CORS headers.

If target server is out of your control, you can make a proxy on your own server and call it instead of the current 3rd-party server. This will allow you to simplify things even further by making proxy at the same address as the page with the form.

Not the answer you’re looking for? Browse other questions tagged javascript html forms or ask your own question.

Linked

Related

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

site design / logo © 2021 Stack Exchange Inc; user contributions licensed under cc by-sa. rev 2021.4.16.39093

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.