Dubrowsky
Хроники одного дупла
Блогово  →  WebDev  → 

Почему не работает form.submit()

19 Августа 2012 года

Это - философская запись о том, куда уходит время :) Точнее, куда уходит время кодера, занимающегося фронтом. Очень показательный пример.

Есть форма, а в конце формы - красивая кнопка, сверстанная тегом <a>, вместо стандартного <input type="submit" />. Таких форм много. Чтоб по клику на кнопке форма субмитилась, есть такой код:

$(document.body).on('click', 'a.form-submit', function(e) {
	$(this).closest('form').submit();
	return false;
});

То есть он слушает любой клик по ссылке с классом form-submit, и отправляет ближайшую вверх по дереву форму.

И вот эти несчастные 4 строчки, служившие верой и правдой, перестают работать. Казалось бы, что тут может не работать? Но узнать это не так просто. В консоль падает ошибка из недр jQuery, который, само собой, тщательно заминифаен и обфусцирован.

Заменяем jQuery на исходник (+5 минут на поиски исходника и передергивание), смотрим еще раз на ошибку, смотрим, что там за код и что он делает (еще +5 минут - плюнуть в консоль то-да-се). Наконец вкурив, удивляемся и чешем репу, потому что код этот по идее всего лишь дергает метод submit() у DOM-узла формы (т.е. старый добрый form.submit(), первый класс вторая четверть).

Грешим на магию внутри jQuery, пробуем сделать то же самое напрямую (+3 минуты), не работает.

Выводим в консоль содержимое метода form.submit() (в надежде увидеть там [native code]):

$(document.body).on('click', 'a.form-submit', function(e) {
	console.log($(this).closest('form').get(0).submit);
}

И вот оно - спелое сочное яблоко! Консоль сообщает, что отныне и навеки form.submit - это не встроенный метод, а DOM-узел <input type="submit" name="submit" /> (+2 минуты на то, чтоб удивиться как следует).

Смотрим html-код, и правда - рядом с кнопкой сидит невидимый INPUT, добавленный туда, чтоб форма отправлялась по Enter (если внутри формы нет <input type="submit" />, она отправляться не будет). А, поскольку "для удобства программиста" инпуты из формы добавляются в свойства формы с именами в качестве ключей (чтоб можно было писать alert(form.login) для значения <input  name="login" />), мы нашим инпутом затираем свойство, ссылающееся на нужный нам [native code]. (+2 минуты на поиск места, где генерится html и переименование инпута).

И еще +3 минуты на обратную замену jQuery, выпиливание вывода в консоль и убийство прочего отладочного кода.

20 минут жизни на такую хрень. А что делать, что делать? Можно делать выгодные вклады в какой-нибудь надежный банк, где, согласно рекламе, время будет работать на нас... но лучше бы я эти 20 минут на роликах побегал :)

Да. Еще это - философский пост о вреде синтаксического сахара. Очень похоже на register_globals в PHP (который, напомню, тоже создавал переменные "для удобства", и, по счастью, будет окончательно ликвидирован в PHP 5.4).

Камменты

admin19.08.2012, 05:48#
картинки с девкаме этапять
Дуброн самый19.08.2012, 06:28#
милые котята обеспечивают девкам достойную конкуренцию
Тимур19.08.2012, 09:50#
Буквально вчера у меня проблема с модальными окнами, которые при закрытии не уничтожались а просто скрывались, ничего лучшем чем залезть в исходники jqury.nodal я не нашел и исправил там строку скрытия на destroy. Вот такая магия Jquery. А тут у вас просто классика, кстати какая версия?
Andrey Belkov21.09.2012, 22:21#
А я кстати напарывался на эту багу. Вернее, на подобную ситуацию (по загонке) напарвываешься регулярно. Но консоль указывающая на ДОМ узел --- сразу все проясняет.
max08.01.2016, 16:44#
Спасибо, я бы не докапался, очень давно думал какое дефолтное имя назначить input-у, ну и раз type=submit то и name=submit, десять лет делал формы и никогда их не отправлял с помощью js.

А тут пипец, 2 строчки и не работают, а решение переименовать input name=fuckSyntacticSugar
Сергей22.07.2017, 02:12#
Также столкнулся с неработающим .submit() при отправке формы.
Оказалось, отправляемая форма была вложена в другую. При этом по кнопке внутренняя форма отправлялась. После вынесения форму наружу, всё заработало
Nik10.11.2017, 14:19#
Автор, спасибо за статью 5-летней давности. Подарил мне несколько часов жизни.

Написать коммент: памятка постеру

 

Крутые посты wtf??? →

15.02.2013 · 24 каммента · рейтинг 9.98
28.04.2008 · 44 каммента · рейтинг 9.54
23.01.2013 · 20 камментов · рейтинг 9.05
06.03.2008 · 29 камментов · рейтинг 7.69
28.03.2008 · 23 каммента · рейтинг 6.87

Последне камменты

18.11.2017  JohnКак закрыть окно Skype / свернуть нафиг в трэй: Спасибо, добрый человек! Неимоверно раздражало.
10.11.2017  NikПочему не работает form.submit(): Автор, спасибо за статью 5-летней давности. Подари...
27.10.2017  ДенисОбработка кликов и цели в Яндекс.Метрике, улучшенный вариант: Блин. А для не в зуб ногой - можно код целиком выл...
17.10.2017  ДубрDenwer - настройка алиасов (ServerAlias): Ахуенно не это, ахуенно то что кто-то пользуется Д...
29.09.2017  Maxтам же: Спасибо, чувак! Это ахуенно, оно заработало!!!

Статсы