Получение ошибки «Подача формы отменена, потому что форма не подключена»

У меня есть старый веб-сайт с 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 больше не поддерживает этот тип кода. Не так ли? Если да, то мой вопрос:

Почему это произошло внезапно? Без предупреждения об устаревании?
Каков обходной путь для этого кода?
Есть ли способ заставить хром (или другие браузеры) работать, как раньше, без изменения какого-либо кода?

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

источник

2017-02-05 Mahmoud Moravej

Я добавил исправление в принятом ответе, чтобы соответствовать тому, что форма является объектом jQuery. Обратите внимание, что это также влияет на обработчик jQuery '.submit()' в дополнение к методу '.click()', указанному выше). – ryanm

130

Быстрый ответ: приложите форму к корпусу.

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, представление формы вызывает мгновенное перемещение страницы.
Таким образом, отображение «устаревшего предупреждающего сообщения» практически невозможно.
Я также считаю неприемлемым, что это серьезное изменение не включено в список изменений функций. Chrome 56 особенности - www.chromestatus.com/features#milestone%3D56

источник

2017-02-07 04:39:33

Просто эта ошибка была отмечена некоторыми пользователями. Кроме того, некоторые другие пользователи не имели обновленной версии, поэтому они могли без проблем представлять форму. Сделать ошибку более непоследовательной. Спасибо за ваш ответ! – Ironicnet

Предлагаемое решение не работает для меня в сочетании с использованием jQuery, как в исходном вопросе. Это сработало вместо этого: '$ (document.body) .append (form);' – Chris

@Chris Я только что отредактировал принятый ответ, так как переменная формы является объектом jQuery, а не фактическим элементом формы DOM. Поскольку это использовало 'form [0]', это вызывало бы ошибку «Не удалось выполнить« appendChild »в« Узле »: параметр 1 не имеет тип« Node »."в Chrome.Таким образом, просто измените на' document.body.appendChild (form [0]) '. – ryanm

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

источник

2017-02-06 03:20:13

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

Спасибо @Max Williams, ваш комментарий вернул меня на трек больше, чем принятый ответ. – JirkaV

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

источник

2017-02-09 12:35:14

Вы имеете в виду' document.body.appendChild (form [0]) '? – efeder

Правильно, исправлено. –

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

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

Итак, я попытался прилагая форму тела, используя способ JQuery:

$(document.body).append(form);

И это сработало!

источник

2017-02-10 02:40:56

-1

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

источник

2017-03-03 01:55:44 heavyrick

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

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

мы использовали тот же ответ Приведенную выше и приклеил

$(document.body).append(form);

и worked.Thanks.

источник

2017-03-17 07:56:07

в качестве альтернативы включают event.preventDefault(); в вашем handleSubmit (событие) {

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

источник

2017-06-13 14:29:54 joncode

Рекомендуются ссылки на внешние ресурсы, но добавьте контекст вокруг ссылки, чтобы ваш другие пользователи будут иметь представление о том, что это такое и почему оно есть. Всегда цитируйте наиболее актуальные часть важной ссылки, если целевой сайт недоступен или постоянно находится в автономном режиме. См. [Как написать хороший ответ] (https://stackoverflow.com/help/how-to-answer) –

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

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

Ссылка:
https://dzello.com/blog/2017/02/19/demystifying-enter-key-submission-react-forms-multiple-buttons/ https://github.com/facebook/react/issues/2093

источник

2017-12-16 18:00:21 vaskort

Вы также можете решить эту проблему, применив один патч в Jquery-xxxjs просто добавить после "попробовать {рп} улова (м) {}" линия 1833 этот код:

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

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

источник

2018-02-07 18:06:23 Gaytan

Получение ошибки «Подача формы отменена, потому что форма не подключена»

ответ

Смежные вопросы