Метод submit() форми. submit() — обробник відправки форми на сервер Submit форми

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. Конфлікти імен можуть спричинити збої.

Встановлює обробник відправки форми на сервер або запускає цю подію. Метод має три варіанти використання:

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 відправлена ​​на сервер.")); ) ) ; // Викликаємо подію submit на елементі foo $("#foo"). Submit (); // Встановимо ще один обробник події submit, цього разу елементам // з класом block. В обробник передамо додаткові дані $(".block" ) .submit (( a: 12 , b: "abc" ) , function (eventObject) " + eventObject.data .b ; alert ("Форму foo відправлено на сервер. " + "В обробник цієї події передані дані: " + externalData ) ; ) ) ;

Виклик методу submit() форми не дорівнює натисканню кнопки відправки. При виклику цього методу буде виконано лише третю з перерахованих вище трьох дій - відправлення данихна сервер. Те, що він не повинен породжувати виклик оброблювача onClickкнопки відправки, цілком зрозуміло - адже ми намагаємося відправити дані в обхід кнопки відправки (який, до речі, може і не бути зовсім). Але й обробник події на Submit у форми теж не викликається - це для багатьох несподіваним. Не будемо судити, наскільки це логічно (і чому ця поведінка відрізняється від поведінки методу 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

Як можна бачити, обидва способи не просто скидають форму, але й викликають обробник події навідновлені форми. Таким чином, метод 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кнопки, наобсязіформи і передає дані на сервер (але що при цьому передається як координати курсору миші?):

5.13. Виклик методу click() у графічної кнопки

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

До "onSubmit" форми стандартної функції addHandler/addEvent (Корисні функції) "прив'язується" певна функція-обробник.
Так от, якщо відправлення форми відбувається по натисканню на input, функція-обробник викликається,
якщо через form.submit(), то немає.
А чому? А як виправити?

Їдете Ви по дорозі, тут раптом бах, "червоне світло" (onSubmit), але подія! Ну ви його обробляєте природно - тисніть на гальмо (form.submit()), їдете далі, а тут опа, бобик вискакує, Ви знову по гальмах, але червоне світло чомусь не з'являється. А чому?
Як поправити - думайте як працює браузер, він працює так як йому треба, а не так як Вам. onSubmit - подія, form.submit() - лише його низькорівневий обробник, використовуваний самим браузером, і доступний програмісту за потребою. З чого б ініціювати цю подію? Так і зациклитись недалеко. Одна справа задумати дію, інша – її виконати. Задумка/думка/подія та метод обробник/педаль/інструмент – різні речі. Не треба вішати обробник на спосіб, це марення. У простішому випадку викликайте функцію обробник перед викликом form.submit().

І до купи. Фіча документована. MSDN:

FORM.submit()
Послідовний метод не дає змоги об'єднати записник. Зображує той, щообсяг мандрівника прямо. When using Microsoft Internet Explorer 5.5 і останній, ви можете зателефонувати FireEvent метод з значенням onsubmit в параметріEvent.

Коли користувач натискає 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", таким чином до форми нічого дописувати не потрібно. Маючи ці параметри, прикріплені до кнопки "submit", а не до form – все це додає більшої гнучкості формі. Тепер можна зробити стільки кнопок, скільки буде потрібно для форми.

Тепер кожна кнопка "submit" відноситься до різних url і все це позбавляє того, що при верстці необхідно писати javascript код. Все це чудово працює і тепер після натискання на якусь кнопку форма отримає formmethod і formaction, які перезапишуть стандартні параметри method та action. Якщо у формі буде звичайна кнопка "submit" без нових параметрів, то він поверне формі значення, встановлені для елемента form.

Властивості formmethod і formaction підтримуються всіма популярними браузерами

Загальноприйнятий факт, що всі елементи форми, що належать їй, повинні знаходитися всередині елемента . Це зменшує гнучкість розробки дизайну самих форм. Завдяки новому атрибуту "form" тепер будь-який елемент можна винести за межі форми та розмістити будь-який елемент форми у будь-якій частині сторінки. Для цього лише необхідно формі додати ідентифікатор ID і потім значення цього ідентифікатора додати до всіх елементів як атрибут.

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