Помилка "Надсилання форми скасовано, оскільки форма не підключена"

У мене старий веб-сайт з 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. Чи є спосіб змусити хром (або інші браузери) працювати як раніше, не змінюючи жодного коду?

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, коли ви намагаєтеся подати форму натисканням клавіші Enter, переконайтеся, що всі ваші кнопки у формі, які не подають форму, мають 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/isissue/2093

додати атрибут type = "button" до кнопки, хто натискає, ви бачите помилку, це працювало для мене.

Ви повинні переконатися, що форма знаходиться в документі. Ви можете додати форму до тіла.

альтернативно включайте event.preventDefault (); у вашій ручціSubmit (event) {

див. 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встановлюється і повідомлення "подає ..." відображається замість форми, тоді ця помилка трапляється.

Переміщення тегу форми поза умовним забезпечувало, щоб він завжди був там, коли потрібно, тобто

<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])

Додавання для нащадків, оскільки це не пов’язано з хромом, але це був перший потік, який з’явився в Google при пошуку помилки подання форми.

У нашому випадку ми додали функцію замінити поточний HTML-код div на завантажувальну анімацію при поданні - оскільки це відбулося до подання форми, більше не було форми та даних для надсилання.

Дуже очевидна помилка в ретроспективі, але якщо хтось опиниться тут, це може заощадити їм деякий час у майбутньому.

Я отримав цю помилку в react.js. Якщо у вас є кнопка у формі, яка ви хочете діяти як кнопка, а не надсилати форму, ви повинні надати їй type = "button". В іншому випадку він намагається надіслати форму. Я вважаю, що васкорт відповів на це документацією, яку ви можете перевірити.

Мені вдалося позбутися повідомлення, використовуючи додавання атрибута type = "button" до елемента кнопки in 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>тегу.

Без a <body>, коли у document.body.appendChild(form);оператора не було об'єкта body, який слід додати.

Я побачив це повідомлення за допомогою кутового, тому я просто взяв метод = "post" та action = "", і попередження не було.