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

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

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

PS Это не работает в последней версии Firefox (без каких-либо сообщений). Также это не работает в IE 11.0 & Edge! (оба без каких-либо сообщений)

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

document.body.appendChild(form);

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

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

HTML SPEC см. 4.10.21.3.2

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

Различный код Chrome см. @@ -347,9 +347,16 @@

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

если вы видите эту ошибку в 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Мне удалось избавиться от сообщения, добавив атрибут type = "button" к элементу кнопки в vue.

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

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

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

Я заметил, что получаю эту ошибку, потому что мой HTML-код не имеет <body>тега.

Без оператора <body>когда document.body.appendChild(form);не было бы объекта тела для добавления.

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