Определение нажатой submit в onsubmit


Содержание

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

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

Здравствуйте! В этом последнем уроке по работе с формами в JavaScript я хотел бы рассказать об отправке данных формы и конкретно об методе submit. Само событие submit появляется при отправке данных формы на сервер. И наиболее частое его применение – это валидация или просто проверка формы перед отправкой.

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

Событие submit

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

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

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

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

  1. Перейдите в текстовое поле и нажмите на клавишу Enter, будет событие, но форма не отправится на сервер благодаря return false в обработчике.
  2. То же самое произойдет при клике на .

При отправке формы путём нажатия Enter на текстовом поле, на элементе генерируется событие click.
Это довольно забавно, учитывая что клика-то и вовсе не было.

Метод submit

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

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

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

Задания

Модальное диалоговое окно

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

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

Проверка правильности заполнения полей формы

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

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


Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Форма onSubmit определяет, какая кнопка отправки была нажата

73 McTrafik [2010-08-26 19:55:00]

У меня есть форма с двумя кнопками отправки и некоторым кодом:

Конечно, две кнопки отправки выполняют разные вещи. Есть ли способ узнать в onSubmit , какую кнопку нажали, поэтому позже я мог бы отправить, выполнив thatButton.click() ?

В идеале я бы не хотел изменять код для кнопок, просто иметь аддон с чистым javascript, который имеет такое поведение.

Я знаю, что FF имеет evnt.explicitOriginalTarget , но я ничего не могу найти для других браузеров.

8 ответов

35 Решение Peter Bailey [2010-08-26 20:13:00]

Нет в самом обработчике событий отправки, нет.

Но то, что вы можете сделать, это добавить обработчики кликов к каждому элементу, который будет информировать обработчик отправки о том, что было нажато.

Здесь полный пример (с использованием jQuery для краткости)

18 Ben Gripka [2012-05-02 22:45:00]

Все приведенные выше ответы очень хороши, но я немного почистил его.

Это решение автоматически помещает имя кнопки отправки в скрытое поле действия. Как javascript на странице, так и код сервера могут проверять значение скрытого поля действия по мере необходимости.

В решении используется jquery для автоматического применения ко всем кнопкам отправки.

Затем напишите код, как это, в обработчик отправки формы.

12 Henrik [2012-04-08 15:52:00]

Голые кости, но подтвержденные рабочие, например:

Первое предложение:

Создайте переменную Javascript, которая будет ссылаться на нажатую кнопку. Позволяет называть его buttonIndex

Теперь вы можете получить доступ к этому значению. 0 означает, что нажата кнопка сохранения, 1 означает, что нажата кнопка saveAndAdd.

Второе предложение

Как я бы это сделал, это создать две функции JS, которые обрабатывают каждую из двух кнопок.


Во-первых, убедитесь, что ваша форма имеет действительный идентификатор. В этом примере я скажу, что идентификатор — это «myForm»

изменить

до

return (false) предотвратит фактическую обработку вашего представления формы и вызовет ваши пользовательские функции, где вы можете отправить форму позже.

Тогда ваши функции будут работать примерно так:

2 Spanky [2012-11-03 01:45:00]

OP заявила, что не хочет изменять код для кнопок. Это наименее навязчивый ответ, который я мог бы придумать, используя другие ответы в качестве руководства. Он не требует дополнительных скрытых полей, позволяет оставить код кнопки неповрежденным (иногда у вас нет доступа к тому, что его генерирует), и дает вам информацию, которую вы искали в любом месте вашего кода. какая кнопка был использован для отправки формы. Я не оценил, что произойдет, если пользователь использует клавишу Enter для отправки формы, а не щелчка.

Тогда у вас есть доступ к переменной «инициатор» в любом месте, где может потребоваться проверка. Надеюсь, это поможет.

0 palswim [2010-08-26 20:01:00]

Почему бы не пропустить входы и затем добавить обработчики onclick к каждому?

Вам не нужно делать это в HTML, но вы можете добавить обработчик для каждой кнопки, например:

Тогда ваша функция может «делать вещи» в соответствии с тем, какое значение вы передали:

0 McTrafik [2010-08-28 01:04:00]

Я использую Ext, поэтому я закончил это:

Илон Маск рекомендует:  big в HTML

а затем, когда пришло время отправить, я сделал

Подождите, вы говорите. Это произойдет, если вы не будете осторожны. Таким образом, onSubmit иногда должен возвращать true

Форма onSubmit определите, какая кнопка отправки была нажата [дубликат]

этот вопрос уже есть ответ здесь:

у меня есть форма с двумя кнопками отправки и код:

конечно, два представить кнопки выполняют разные вещи. Есть ли способ узнать в onSubmit какая кнопка была нажата, так что позже я могу представить, выполнив thatButton.click() ?

В идеале я хотел бы не изменять код для кнопок, просто иметь чистый-javascript аддон, который имеет такое поведение.

Я знаю, что FF имеет evnt.explicitOriginalTarget но я не могу найти ничего для других браузеров.

8 ответов:

Не в самом обработчике событий отправки, нет.

но то, что вы можете do-это добавление обработчиков щелчков в каждую отправку, которая будет информировать обработчик отправки о том, что было нажато.


вот полный пример (используя jQuery для краткости)

все ответы выше очень хороши, но я убрал его немного.

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

решение использует jquery для автоматического применения ко всем кнопкам отправки.

затем напишите такой код в обработчик отправки формы.

голые кости, но подтвержденная работа, пример:

Первый Вариант:

создайте переменную Javascript, которая будет ссылаться на нажатую кнопку. Давайте назовем это buttonIndex

теперь, вы можете получить доступ к этому значению. 0 означает, что была нажата кнопка Сохранить, 1 означает, что была нажата кнопка saveAndAdd.

Второе Предложение

способ, которым я бы справился с этим, — создать две функции JS, которые обрабатывают каждую из двух кнопок.

первый, убедитесь, что ваша форма имеет действительный идентификатор. Для этого примера я скажу, что идентификатор «myForm»

изменить

до

возврат (false) предотвратит фактическую обработку вашей формы и вызовет ваши пользовательские функции, где вы можете отправить форму позже.

тогда ваши функции будут работать примерно так.

OP заявил, что он не хочет изменять код для кнопок. Это наименее навязчивый ответ, который я мог бы придумать, используя другие ответы в качестве руководства. Он не требует дополнительных скрытых полей, позволяет оставить код кнопки нетронутым (иногда у вас нет доступа к тому, что его генерирует), и дает вам информацию, которую вы искали в любом месте вашего кода. какая кнопка использовалась для отправки формы. Я не оценил, что произойдет, если пользователь использует клавишу Enter для отправки форма, а не щелчок.

тогда у вас есть доступ к переменной «инициатор» в любом месте, которое может потребоваться для проверки. Надеюсь, это поможет.

почему бы не перебрать входы, а затем добавить обработчики onclick к каждому?

вам не придется делать это в HTML, но вы можете добавить обработчик для кнопки:

тогда ваша функция может «делать вещи» в зависимости от того, какое значение вы передали:

Я использую Ext, поэтому я закончил тем, что сделал это:

а потом, когда пришло время представить я

Подождите, вы говорите. Это будет цикл, если вы не будете осторожны. Итак, onSubmit должен иногда возвращать true

Отправка формы submit + onsubmit


В принципе эта конструкция срабатывает везде кроме браузера safari (т.е. всех apple устройств).

В safari срабатывает если расскоментировать

Но в этом случае появляется какой то цикл и к файлу mz_sub.php приходит больше 1000 обращений. Т.е. использовать это не могу.

Как сделать чтобы отправка заработала во всех браузерах?

Причина — https, на тестовом сайте без https все работает нормально.

Как можно это исправить, чем мешает https?

Нет, все таки дело не в https ) Помогите найти ошибку.

Не только в safari не срабатывает еще и в firefox. JS не успевает отработать, происходит перезагрузка страницы при нажатии submit. Иногда успевает.

честно говоря вообще непонятен такой подход — и форму слать и эти-же данные аяксом
. имхо это в корне неверно
если нужно что-то аяксово обрабатывать без перезагрузки страницы — ну делайте только это без отправки формы сабмитом
если нужна отправка формы — ну отправьте форму просто и не парьтесь с аяксом
а обработки делайте на стороне сервера . хоть 2 хоть 22

Form onSubmit determine which submit button was pressed [duplicate]

This question already has an answer here:

I have a form with two submit buttons and some code:

Of course the two submit buttons accomplish different things. Is there a way to find out in onSubmit which button was pressed, so later I could submit by doing thatButton.click() ?

Ideally I would like to not modify the code for the buttons, just have a pure JavaScript addon that has this behavior.

I know that Firefox has evnt.explicitOriginalTarget , but I can’t find anything for other browsers.

marked as duplicate by Bergi, Achrome, CloudyMarble, Robert, mu is too short Jun 11 ’13 at 7:12

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

8 Answers 8

Not in the submit event handler itself, no.

But what you can do is add click handlers to each submit which will inform the submit handler as to which was clicked.

Here’s a full example (using jQuery for brevity)

All of the answers above are very good but I cleaned it up a little bit.

This solution automatically puts the name of the submit button pressed into the action hidden field. Both the javascript on the page and the server code can check the action hidden field value as needed.

The solution uses jquery to automatically apply to all submit buttons.

Then write code like this into your form submit handler.


Bare bones, but confirmed working, example:

First Suggestion:

Create a Javascript Variable that will reference the button clicked. Lets call it buttonIndex

Now, you can access that value. 0 means the save button was clicked, 1 means the saveAndAdd Button was clicked.

Second Suggestion

The way I would handle this is to create two JS functions that handle each of the two buttons.

First, make sure your form has a valid ID. For this example, I’ll say the ID is «myForm»

Илон Маск рекомендует:  Как посмотреть историю на компьютере, где она хранится

change

to

the return(false) will prevent your form submission from actually processing, and call your custom functions, where you can submit the form later on.

Then your functions will work something like this.

OP stated he didn’t want to modify the code for the buttons. This is the least-intrusive answer I could come up with using the other answers as a guide. It doesn’t require additional hidden fields, allows you to leave the button code intact (sometimes you don’t have access to what generates it), and gives you the info you were looking for from anywhere in your code. which button was used to submit the form. I haven’t evaluated what happens if the user uses the Enter key to submit the form, rather than clicking.

Then you have access to the ‘initiator’ variable anywhere that might need to do the checking. Hope this helps.

I use Ext, so I ended up doing this:

and then when it was time submit I did

Wait, you say. This will loop if you’re not careful. So, onSubmit must sometimes return true

Why not loop through the inputs and then add onclick handlers to each?

You don’t have to do this in HTML, but you can add a handler to each button like:

Then your function could «do stuff» according to whichever value you passed:

.submit()

Содержание:

.submit( handler ) Возвращает: jQuery

Описание: Устанавливает обработчик отправки формы на сервер, либо запускает это событие.

Добавлен в версии: 1.0 .submit( handler )

Добавлен в версии: 1.4.3 .submit( [eventData ], handler )


Добавлен в версии: 1.0 .submit()

This method is a shortcut for .on( «submit», handler ) in the first variation, and .trigger( «submit» ) in the third.

The submit event is sent to an element when the user is attempting to submit a form. It can only be attached to elements. Forms can be submitted either by clicking an explicit , , or , or by pressing Enter when certain form elements have focus.

Depending on the browser, the Enter key may only cause a form submission if the form has exactly one text field, or only when there is a submit button present. The interface should not rely on a particular behavior for this key unless the issue is forced by observing the keypress event for presses of the Enter key.

For example, consider the HTML:

The event handler can be bound to the form:

Now when the form is submitted, the message is alerted. This happens prior to the actual submission, so we can cancel the submit action by calling .preventDefault() on the event object or by returning false from our handler. We can trigger the event manually when another element is clicked:

After this code executes, clicks on Trigger the handler will also display the message. In addition, the default submit action on the form will be fired, so the form will be submitted.

The JavaScript submit event does not bubble in Internet Explorer. However, scripts that rely on event delegation with the submit event will work consistently across browsers as of jQuery 1.4, which has normalized the event’s behavior.

.submit() — обработчик отправки формы на сервер

.submit() — устанавливает обработчик отправки формы на сервер, либо запускает это событие.

Метод имеет три варианта использования.

  • handler — функция, которая будет установлена в качестве обработчика.
  • eventData — объект содержащий данные, для передачи в обработчик. Должны быть представлены в формате ;
  • handler — функция, которая будет установлена в качестве обработчика.

Вызывает событие submit, у выбранных элементов страницы.

В первых двух вариантах использования, метод является аналогом .on(«submit», handler) , а в третьем случае аналогом .trigger( «submit» ) .

Событие submit происходит непосредственно перед отправкой формы на сервер и в обработчике можно инициировать отмену отправки формы, вызвав метод eventObject.preventDefault() или просто возвратив false . Событие submit можно привязать только к элементу form .

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

Для примера рассмотрим HTML:

Обработчик события может быть привязан к форме:

Теперь, когда форма будет отправлена, будет выдано сообщение. Это событие происходит до фактической отправки, поэтому мы можем отменить это действие, вызвав .preventDefault() для объекта события или вернув false из нашего обработчика. Мы можем инициировать событие вручную при нажатии на другой элемент:

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

Событие отправки JavaScript не «всплывает» в Internet Explorer. Тем не менее, скрипты, которые полагаются на делегирование событий с событием отправки, будут последовательно работать в разных браузерах начиная с jQuery 1.4, что нормализовало поведение события.


Дополнительно

Событие submit() является лишь сокращением для .on(«submit», handler) , поэтому убрать установленный обработчик можно с помощью .off( «submit» )

Формы и их дочерние элементы не должны использовать имена ввода или идентификаторы, которые противоречат свойствам формы, таким как submit , length , или method . Конфликты имен могут вызывать сбои.

Тонкости свойства disable у кнопок формы, отправляемой на сервер (Как делать кнопки неактивными)

Уже неоднократно на хабре (вот в этой публикации и в этой) ставился вопрос о том, что было бы хорошо кнопкам формы, отправляемой на сервер, ставить свойство disabled = «disabled» .

Однако, до сих пор так и не разобрались, зачем это нужно и как все-таки это делать. Казалось бы, что может быть проще и о чем здесь вообще можно разговаривать, ан нет — на поверку все оказалось не так тривиально. Сразу замечу, что нижеследующие рассуждения применимы к обеим типам форм: как отправляемым через обычный SUBMIT, так и с помощью AJAX.

Зачем нужно делать кнопки неактивными

  1. Чтобы пользователю стало очевидным, что он уже нажал на кнопку, и что форма отправляется
  2. Чтобы сервер не загружался лишними запросами, и чтобы уменьшить вероятность какой-либо ошибки

Понятно, что можно предотвратить лишние нажатия при помощи навешивания специальной визуализации, говорящей, что запрос принят и форма отправляется (простейший пример — показать какой-нибудь анимированный gif). Однако, кнопки-то при этом все равно останутся кликабельными, и самые нетерпеливые пользователи не применут воспользоваться такой возможностью. При этом, на эти дополнительные нажатия форма уже никак не сможет отреагировать (анимированный gif уже крутится), и фрустрация пользователя только увеличится.

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

Как делать кнопки неактивными

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

Почему недостаточно просто делать нажатую кнопку неактивной:

  1. Submit формы может произойти и по нажатию на Enter. Поэтому обработку кнопок надо вешать на событие onsubmit самой формы. К тому же, у формы может быть несколько кнопок, и было бы логичным делать их все неактивными, а не только ту кнопку, которую нажали.
  2. Если после сабмита формы вновь вернуться на страницу с формой (по кнопке «Назад» в браузере), то сработает кеширование: мы столкнемся с неактивными кнопками и не сможем отправить форму еще раз — без принудительной перезагрузки страницы с потерей всех заполненных ранее полей (Возврат к поисковой форме со страницы результатов поиска тут живейший пример).
  3. Если у формы несколько кнопок (например, «Опубликовать» и «Отмена»), то мы не сможем передать серверу, какая именно кнопка была нажата: неактивная кнопка не передает свое имя и значение — даже если мы делаем ее неактивной по событию onsubmit

Итак, сценарий создания неактивных кнопок

Программируем формы

Кнопки

В HTML-формах используется четыре вида кнопок:

В атрибуте кнопки можно задать обработчик события onClick , а в атрибуте формы — обработчики событий onSubmit и onReset . Кроме того, кнопкам и форме соответствуют объекты DOM . Объект , отвечающий кнопке, имеет метод click () . Объект , отвечающий форме, имеет методы submit () и reset () . С точки зрения программирования важен вопрос о взаимодействии этих методов друг с другом и с соответствующими обработчиками событий.

В каком случае при вызове метода (из любого места JavaScript-программы) будет автоматически вызван и соответствующий обработчик события, заданный пользователем в атрибуте кнопки или формы? Ответ здесь следующий:

  • при вызове метода click () кнопки вызывается и обработчик события onClick этой формы;
  • при вызове метода submit () формы не вызывается обработчик события onSubmit формы;
  • при вызове метода reset () формы вызывается и обработчик события onReset формы.

Ниже мы на примерах рассмотрим, что это означает на практике. Таким образом, при программном вызове метода submit () нужно позаботиться о дополнительном вызове обработчика события onSubmit , чтобы, например, данные не были отправлены на сервер без предварительной проверки. Как это сделать — мы расскажем ниже. Особое внимание мы уделим также возможности перехвата и генерирования события отправки данных на сервер .


Кнопка button

Кнопка типа button вводится в форму главным образом для того, чтобы можно было выполнить какие-либо действия либо при ее нажатии пользователем, либо при вызове метода click () .

Вызов метода click () у кнопки равносилен нажатию кнопки, что и демонстрирует приведенный пример. Как мы увидим ниже, это же справедливо для любых типов кнопок.

Кнопка submit

Кнопка отправки ( submit ) позволяет отправить данные, введенные в форму, на сервер. В простейшем случае — при отсутствии у контейнера

Для имитации ответа сервера заготовим следующий простой HTML-файл receive . htm :

Теперь усложним наш пример: добавим обработчики событий onClick (у кнопки отправки) и onSubmit (у формы), и посмотрим на поведение браузера при нажатии кнопки отправки:

Убедитесь, что нажатие кнопки отправки приводит к следующей последовательности действий браузера:

  1. вызов обработчика события onClick у данной кнопки;
  2. вызов обработчика события onSubmit у формы;
  3. отправка данных формы на сервер.

Соответственно, для выполнения дополнительных действий перед отправкой данных можно поместить код в любой из указанных обработчиков; в частности, поместив в какой-либо из них оператор return false , мы сможем предотвратить отправку данных .

Вызов метода click () кнопки отправки равносилен нажатию этой кнопки — произойдут все три вышеперечисленных действия:

Метод submit() формы

Вызов метода submit () формы не равносилен нажатию кнопки отправки. При вызове этого метода будет выполнено только третье из вышеперечисленных трех действий — отправка данных на сервер. То, что он не должен порождать вызов обработчика onClick кнопки отправки, вполне понятно — ведь мы пытаемся отправить данные в обход кнопки отправки (которой, кстати, может и не быть вовсе). Но и обработчик события onSubmit у формы тоже не вызывается — это является для многих неожиданным. Не будем судить, насколько это логично (и почему это поведение отличается от поведения метода reset () , см. ниже), а просто проиллюстрируем этот эффект, введя в предыдущий пример ссылку, вызывающую метод submit () :

Тем самым данные могут уйти на сервер без предварительной проверки JavaScript-скриптом. Каким же образом заставить браузер вызвать обработчик onSubmit ? Для этого существует возможность обратиться к этому обработчику напрямую: document.f.onsubmit() . Остается предусмотреть, что после этого метод submit () должен вызываться не всегда, а только если onSubmit либо не возвратил никакого значения, либо возвратил true , иными словами, если он не возвратил false . Окончательно мы получаем:

Есть еще один способ инициировать отправку данных формы в обход кнопки отправки (которой, кстати, у формы может и не быть). Если фокус находится на любом текстовом поле формы и пользователь нажмет клавишу Enter, то (в большинстве браузеров) произойдет вызов обработчика события onSubmit формы и отправка данных на сервер.

Этот способ работает логичнее, чем метод submit () , т.к. отправляемые на сервер данные не избегают предварительной проверки обработчиком onSubmit .

Событие onsubmit

Событие onsubmit возникает при отправке формы, это обычно происходит, когда пользователь нажимает специальную кнопку Submit.

Синтаксис

Значения

Пример

В данном примере при отправке формы будет выведено диалоговое окно. При нажатии на кнопку ОК форма будет отправлена на адрес, заданный атрибутом action , а при нажатии на кнопку Отмена данные формы передаваться не будут.

Браузеры ?

4 12 1 3.5 1 1

Браузеры

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Илон Маск рекомендует:  Что такое код createfont
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL