Метод submit() формы. Обработчик или источник события submit Непотребный submit html

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

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

Submit(handler)

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

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

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

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

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

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

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

$("#target").submit(function(event) { alert("Handler for .submit() called."); event.preventDefault(); });

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

$("#other").click(function() { $("#target").submit(); });

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

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

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

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

К "onSubmit" формы стандартной функцией addHandler/addEvent (Полезные функции ) "привязывается" некая функция-обработчик.
Так вот, если отправка формы происходит по нажатию на input, функция-обработчик вызывается,
если же через form.submit(), то нет.
А почему? А как поправить?

Едете Вы по дороге, тут вдруг бах, "красный свет" (onSubmit), событие однако! Ну вы его обрабатываете естественно - давите на тормоз (form.submit()), едете дальше, а тут опа, бобик выскакивает, Вы опять по тормозам, но красный свет почемуто не появляется. А почему?
Как поправить - мыслите как работает браузер, он работает так как ему надо а не так как Вам. onSubmit - событие, form.submit() - всего лишь его низкоуровневый обработчик, используемый самим браузером, и доступный программисту по необходимости. С чего бы ему инициировать это событие? Так и зациклиться недалеко. Одно дело задумать действие, другое - его выполнить. Задумка/мысль/событие и метод обработчик/педаль/инструмент - разные вещи. Ненадо вешать обработчик на метод, это бред. В простейшем случае вызывайте функцию обработчик перед вызовом form.submit().

И до кучи.. Фича-то документированная. MSDN:

FORM.submit()
The submit method does not invoke the onsubmit event handler. Call the onsubmit event handler directly. When using Microsoft Internet Explorer 5.5 and later, you can call the fireEvent method with a value of onsubmit in the sEvent parameter.

Когда пользователь нажимает input получается что-то вроде

If (form.onSubmit()) form.submit();

Делайте вывод.
Если form.submit() будет вызывать form.onSubmit() то получится рекурсия.
Чтобы поправить нужно использовать расширенную версию "стандартной функции addHandler/addEvent", которая позволяет инициировать события. В IE конечно можно и без этого - смотрим в сторону fireEvent. В FF тоже можно сделать что-то подобное но намного сложнее.

Дворнов Роман[досье] , более универсально — так:
if (form.onsubmit() != false) form.submit();
Потому что, во-первых, JavaScript чувствителен к регистру (нельзя писать form.onSubmit), а во-вторых, отправка данных на сервер должна происходить не только, когда onsubmit() возвратил true, но и когда он ничего не возаратил (например, если в обработчике onsubmit стоит просто alert, или пользователь вообще не задавал никаких действий в этом обработчике).

Thirteensmay[досье] , конечно, сравнение с красным светом, педалью и бобиком красивое! :) Но оно, к сожалению, не объясняет данного феномена. Ибо оно в равной степени должно было быть применимо к любым обработчикам и методам, чего, однако, не наблюдается. Сформулирую точнее оставшийся открытым вопрос:

Метод click() у гиперссылки — влечет за собой вызов обработчика onClick этой ссылки
- метод click() у ЛЮБОЙ кнопки формы — влечет за собой вызов обработчика onClick этой кнопки
- метод reset() у формы — влечет за собой вызов обработчика onReset у формы
- НО метод submit() у формы — НЕ влечет за собой вызов обработчика onSubmit у формы!

Какие доводы могли быть (у разработчиков языка или браузеров?), чтобы сделать так по-разному?

С приходом HTML5 формы сталее более универсальными. Элемент input теперь может содержать электронные адреса, даты и много другое, их можно отмечать как обязательные не прибегая к javascript – и это всего лишь некоторые из наиболее ценных возможностей. Также теперь для одной формы можно задействовать несколько submit кнопок, а также теперь есть возможность вынести кнопку submit за пределы формы.

До недавнего времени в форму можно было вставить только одну кнопку submit, в противном случае форма обрабатывала только последнюю кнопку. Добавляя method="post" и url к элементу формы "form" мы получали рабочую форму.

Теперь ситуация изменилась – в HTML добавили новые свойства "formmethod" и "formaction". Они позволяют добавить метод post и url непосредственно в кнопку "submit", таким образом к form ничего дописывать не нужно. Имея эти параметры, прикрепленные к кнопке "submit", а не к form – все это добавляет больше гибкости форме. Теперь можно сделать столько кнопок, сколько будет необходимо для формы.

Теперь каждая кнопка "submit" относится к разным url и все это избавляет от того, что при верстке необходимо писать javascript код. Все это отлично работает и теперь по нажатии на какую-нибудь кнопку форма получит formmethod и formaction, которые перезапишут стандартные параметры method и action. Если в форме будет присутствовать обычная кнопка "submit" без новых параметров, то он вернет форме значения, установленные для элемента form.

Свойства formmethod и formaction поддерживаются всеми популярными браузерами

Общепринятый факт, что все элементы формы, принадлежащие ей должны находится внутри элемента . Это уменьшает гибкость при разработке дизайна самих форм. Благодаря новому атрибуту "form" теперь любой элемент можно вынести за пределы формы и разместь любой элемент формы в любой части страницы. Для этого всего лишь необходимо форме добавить идентификатор ID и затем значение этого идентификатора добавить ко всем элементам в качестве аттрибута.

На сегодняшний день аттрибут form поддерживается всеми популярными браузерами, за исключением Internet Explorer (вплоть до 10й версии).

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

Вызвать метод submit() формы

5.8. Метод submit() не вызывает обработчика onSubmit

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

Вызвать submit() с преварительной проверкой onSubmit

5.9. Принудительный вызов onSubmit перед submit()

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

Введите текст и нажмите Enter:

5.10. Отправка данных формы нажатием клавиши Enter

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

Кнопка reset

Кнопка сброса (reset ) позволяет вернуть все поля формы в первоначальное состояние, которое они имели при загрузке страницы. Нажатие кнопки сброса приводит к следующей последовательности действий браузера:

1. вызов обработчика события onClick у данной кнопки;

2. вызов обработчика события onReset у формы;

3. восстановление значений по умолчанию во всех полях формы.

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

Вызвать метод click() кнопки сброса

5.11. Вызов метода click() у кнопки сброса

Есть способы сбросить форму в исходное состояние в обход кнопки сброса (которой, кстати, у формы может и не быть). Во-первых, этовызов метода reset () у формы. Во-вторых, если фокус находится на любом поле или кнопке формы, то можно нажать клавишу Esc. Пример:

Измените текст, а затем нажмите Esc (либо ссылку).
Вызвать метод reset() формы

5.12. Сброс формы нажатием клавиши Esc

Как можно видеть, оба способа не просто сбрасывают форму, но и вызывают обработчик события onReset формы. Таким образом, методreset () ведет себя более логично и предсказуемо , нежели submit ().

Графическая кнопка

Графическая кнопка - это разновидность кнопки отправки. Ее отличие в том, что вместо кнопки с надписью пользователь увидит картинку, по которой можно кликнуть:

Кроме того, когда пользователь кликает по графической кнопке, то на сервер отправятся не только данные, введенные в поля формы, но также и координаты указателя мыши относительно левого верхнего угла изображения. К сожалению, перехватить эти координаты в JavaScript-программе не удается. Если Вам необходимо работать с этими координатами, то вместо графической кнопки рекомендуется создать активную карту с помощью контейнера .

Графические кнопки имеют ряд странностей. Например, являясь одновременно и кнопкой, и изображением, они почему-то отсутствуют как в коллекции document.f.elements , так и в коллекции document.images (IE 7, Mozilla Firefox). Как следствие, они не учитываются ни в общем количестве элементов формы (document.f.length ), ни в общем количестве изображений документа (document.images.length ).

Как же обратиться к такой кнопке? Это можно сделать, например, задав атрибут ID:

и затем в программе написав: var knopka = document.getElementById ("d1"). После этого мы можем обращаться к свойствам этой кнопки, например knopka.src, а также к методу knopka.click (). Следующий пример показывает, что вызов метода click ()графической кнопки "почти" равносилен нажатию этой кнопки, т.е. последовательно вызывает обработчики onClick кнопки, onSubmitформы и передает данные на сервер (но что при этом передается в качестве координат курсора мыши?):

5.13. Вызов метода click() у графической кнопки

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

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

handler(eventObject) — функция, которая будет установлена в качестве обработчика. При вызове она будет получать объект события eventObject .

handler(eventObject) — см. выше.
eventData — дополнительные данные, передаваемые в обработчик. Они должны быть представлены объектом в формате: {fName1:value1, fName2:value2, ...} .

Убрать установленный обработчик можно с помощью метода unbind() .

Все три варианта использования метода, являются аналогами других методов (см. выше), поэтому все подробности использования submit() , можно найти в описании этих методов.

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

В IE событие submit в отличие от других событий не обладает свойством "всплытия вверх по иерархии". Однако начиная с jQuery-1.4 эта недоработка устранена и обработчики события submit , установленные на элементы, которые лежат выше элемента формы по иерархии, будут оповещены о предстоящей отправке данных на сервер.

// установим обработчик события submit, элементу с идентификатором foo, // после чего запретим отправку данных на сервер $("#foo" ) .submit (function () { alert ("Форма foo отправлена на сервер." ) ; return false ; } ) ; // вызовем событие submit на элементе foo $("#foo" ) .submit () ; // установим еще один обработчик события submit, на этот раз элементам // с классом block. В обработчик передадим дополнительные данные $(".block" ) .submit ({ a: 12 , b: "abc" } , function (eventObject) { var externalData = "a=" + eventObject.data .a + ", b=" + eventObject.data .b ; alert ("Форма foo отправлена на сервер. " + "В обработчик этого события переданы данные: " + externalData ) ; } ) ;