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

У меня есть старый веб-сайт с 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! (оба без сообщения)

ОТВЕТЫ

Ответ 1

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

document.body.appendChild(form);

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

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

HTML SPEC см. 4.10.21.3.2

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

Различия в коде Chrome см. @@-347,9 +347,16 @@

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

Ответ 2

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

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

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

Ответ 3

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

Ответ 4

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

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

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

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

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

Ответ 6

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

Ответ 7

Если вы видите это в React, обратите внимание на то, что <form> прежнему нужно визуализировать в DOM во время отправки. т.е. это не удастся

{ this.state.submitting ? 
     <div>Form is being submitted</div> :
     <form onSubmit={()=>this.setState({submitting: true}) ...>
         <button ...>
     </form>
}

Таким образом, когда форма отправляется, устанавливается состояние .submitting, и вместо формы отображается сообщение " state.submitting...", тогда возникает эта ошибка.

Перемещение тега формы за пределы условного гарантировало, что он всегда был там, когда это необходимо, т.е.

<form onSubmit={...} ...>
  { this.state.submitting ? 
     <div>Form is being submitted</div> :
     <button ...>
  }
</form>

Ответ 8

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

Ответ 9

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

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

мы использовали тот же самый ответ, указанный выше, и вставили

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

и это сработало. Спасибо.

Ответ 10

Добавление для потомков, поскольку это не связано с Chrome, но это была первая тема, которая появилась в Google при поиске этой ошибки отправки формы.

В нашем случае мы прикрепили функцию для замены текущего HTML файла div анимацией "загрузки" при отправке - поскольку это произошло до отправки формы, больше не было ни формы, ни данных для отправки.

Очень очевидная ошибка в ретроспективе, но если кто-то попадет сюда, это может сэкономить им время в будущем.

Ответ 11

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

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

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

Ответ 12

Я получил эту ошибку в Reaction.js. Если у вас есть кнопка в форме, которую вы хотите действовать как кнопка, а не отправлять форму, вы должны указать ее type = "button". В противном случае он пытается отправить форму. Я считаю, что Васкорт ответил на это с некоторыми документами, которые вы можете проверить.

Ответ 13

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