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

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

 

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

27.06.2012 · 37 камментов · рейтинг 12.21
15.02.2013 · 23 каммента · рейтинг 10.32
06.03.2008 · 29 камментов · рейтинг 7.89
28.03.2008 · 23 каммента · рейтинг 7.05
20.03.2014 · 7 камментов · рейтинг 6.59

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

21.05.2017  Vadim GukОбработка кликов и цели в Яндекс.Метрике, улучшенный вариант: Большое спасибо за решение задачи.
20.05.2017  ДмитрийТестовое задание для PHP-программиста (Junior): А джуны ещё нужны у вас в компании?
18.04.2017  ДубрОбработка кликов и цели в Яндекс.Метрике, улучшенный вариант: Вячеслав, блин, я там скобку потерял =) Обновил, ...
17.04.2017  Вячеславтам же: вот http://www.totalat.ru/service/remont-akpp-bmw/
17.04.2017  Вячеславтам же: Вашу версию вставил. Даже alert проверочный вывод...

Статсы