Получение ошибки " отправка формы отменена, поскольку форма не подключена"

Question

Получение ошибки " отправка формы отменена, поскольку форма не подключена"

У меня есть старый сайт с JQuery 1.7, который работает правильно до двух дней назад. Вдруг некоторые из моих кнопок больше не работают и, нажав на них, я получаю это предупреждение в консоли:

отправка формы отменена, потому что форма не подключена

код за щелчком что-то вроде этого:

 this.handleExcelExporter = function(href, cols) {

   var form = $('<form method="post"><input type="submit" /><input type="hidden" name="layout" /></form>').attr('action', href);

   $('input[name="layout"]', form).val(JSON.stringify(cols));

   $('input[type="submit"]', form).click();

 }

похоже, что Chrome 56 больше не поддерживает такой код. Не так ли? Если да мой вопрос это:

почему это вдруг случилось? Без какого-либо предупреждения об осуждении?

каков обходной путь для этого кода?

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

П. С.
Он также не работает в последней версии firefox (без каких-либо сообщений). Также он не работает в IE 11.0 & Edge! (оба без каких-либо сообщений)

1648 9

jQuery javascript google-chrome jquery-1.7

9 ответов:

Comments

Ничего не найдено.

KyungHun Jeon · Accepted Answer · 2017-06-21 11:48:49

быстрый ответ : добавьте форму для тела.

document.body.appendChild(form);

или, если вы используете jQuery, как указано выше:$(document.body).append(form);

подробности : Согласно стандартам HTML, если форма не связана с контекстом просмотра(документом), отправка формы будет прервана.

HTML SPEC посмотреть 4.10.21.3.2

в Chrome 56 эта спецификация была применена.

Chrome code diff см. @@ -347,9 +347,16 @@

P. S о вашем вопросе №1. На мой взгляд, в отличие от ajax, подача формы вызывает мгновенное перемещение страницы.
Таким образом, отображение "устаревшего предупреждающего сообщения" практически невозможно.
Я также считаю неприемлемым, что это серьезное изменение не включено в список изменений функций. Хром 56 особенности -www.chromestatus.com/features#milestone%3D56

Liu Tao · Accepted Answer · 2017-02-08 04:09:24

вы должны убедиться, что форма в документе. Вы можете добавить форму к телу.

Rizki Pratama · Accepted Answer · 2017-02-10 05:12:05

Я вижу, что вы используете jQuery для инициализации формы.

когда я пытаюсь ответить @KyungHun Jeon, это не работает для меня, что использовать jQuery тоже.

Итак, я попытался добавить форму к телу с помощью способа jQuery:
$(document.body).append(form);
и это сработало!

vaskort · Accepted Answer · 2018-01-26 16:45:08

Если вы видите эту ошибку в React JS при попытке отправить форму, нажав enter, убедитесь, что все ваши кнопки в форме, которые не отправляют форму, имеют type="button".

Если у вас есть только один button С type="submit" нажатие Enter отправляет форму как ожидаемый.

References:
https://dzello.com/blog/2017/02/19/demystifying-enter-key-submission-react-forms-multiple-buttons/ https://github.com/facebook/react/issues/2093

joncode · Accepted Answer · 2017-06-13 17:29:54

также включают событие.метод preventDefault(); в handleSubmit (event) {

см.https://facebook.github.io/react/docs/forms.html

moti irom · Accepted Answer · 2017-02-12 11:13:03

в зависимости от ответа от KyungHun Jeon, но appendChild ожидает узел dom, поэтому добавьте индекс в объект jquery, чтобы вернуть узел: document.body.appendChild(form[0])

Abhinav Chawla · Accepted Answer · 2017-03-17 09:56:07

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

мы использовали jquery.формы.js. который является плагином форм и доступен здесь. http://malsup.com/jquery/form/

мы использовали тот же ответ, что и выше, и вставили
$(document.body).append(form);
и это сработало.Спасибо.

Gaytan · Accepted Answer · 2018-02-07 20:06:23

вы также можете решить эту проблему, применив один патч в jquery-x.x.x.js просто добавьте после "try { rp;} catch (m) {}" строку 1833 этот код:

if (r instanceof HTMLFormElement &&! r.parentNode) { r.style.display = "none"; document.body.append (r); r [p] (); }

Это подтверждает, когда форма не является частью тела и добавляет его.

heavyrick · Accepted Answer · 2017-03-03 03:55:44

Я видел это сообщение с помощью angular, поэтому я просто взял method="post" и action="", и предупреждение исчезло.