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


156

У мене старий веб-сайт з 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! (обидва без жодного повідомлення)


Я додав виправлення у прийняту відповідь, щоб відповідати тому, що форма є об’єктом jQuery. Зауважте, це також впливає на .submit()оброблювач jQuery (крім .click()методу, зазначеного вище).
ryanm

Відповіді:


185

Швидка відповідь: додайте форму до тіла.

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


4
Просто про цю помилку повідомили деякі користувачі. Також деякі інші користувачі не мали оновленої версії, тому вони могли без проблем надіслати форму. Робить помилку непослідовнішою. Дякую за вашу відповідь!
Ironicnet

Запропоноване рішення не спрацювало для мене в поєднанні з використанням jQuery, як в оригінальному запитанні. Натомість це спрацювало: $(document.body).append(form);
Кріс,

1
@Chris Я щойно відредагував прийняту відповідь, оскільки змінна форми є об’єктом jQuery, а не фактичним елементом форми DOM. Під час використання form[0]це призведе до помилки "Не вдалося виконати" appendChild "на" Node ": параметр 1 не типу" Node "." в Chrome. Таким чином, просто змінити на document.body.appendChild(form[0]).
ryanm

@ryanm, я просто редактор, тому що я написав наступний рядок $(document.body).append(form);. Ви можете додати своє рішення до прийнятої відповіді, відредагувавши його або запитавши у @KyungHun Jeon, чи хоче він прийняти ваше рішення замість його.
Кріс

@Chris дякую! Я подумав, оскільки питання було в jQuery, відповідь має бути занадто (може бути заплутаним), але моя редакція виглядає так, як її відхилили. Лише примітка для інших перехожих, що це може бути document.body.appendChild(form[0])(трохи швидше) АБО $(document.body).append(form).
ryanm

50

якщо ви бачите цю помилку в 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


6
Крім того, на що слід звернути увагу в React, <form>все ще має відображатися в DOM після його натискання. тобто це не вдасться {{this.state.submitting? <div> Форма подається </div>: <форма onSubmit = {() => this.setState ({submitting: true}) ...> <button ...> </form>} `Отже, коли форма надсилається, state.submittingвстановлюється і замість форми відображається повідомлення "подає ...", тоді ця помилка трапляється. Переміщення тегу форми поза умовним умовою гарантувало, що він завжди був там, коли потрібно.
Майк Рулін

Добре знати. Я думаю, вам не доведеться змінювати весь formелемент на a div. Я вважаю, що якщо ви просто зміните вміст formзамість заміни елемента, він буде працювати, як очікувалося.
васкорт

Отже, як сказав Макс Вільямс, це умова гонки - браузер перевіряє, чи форма там є, але форма вже відсутня.
pianoJames

prevenDefault () викликає це сповіщення від Chrome
imbatman

Перше посилання розірвано: web.archive.org/web/20170410070341/http://dzello.com/blog/2017/…
cmp


11

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


7
У мене це було, і виявилося, що до кнопки віддаленого подання форми додано onclick, який видалив елемент, що містить форму. Таким чином, в основному існувала умова перегонів між формою, що подається, та формою, що її видаляють.
Макс Вільямс

4
Дякуємо @Max Williams, ваш коментар повернув мене до сліду більше, ніж прийнята відповідь.
JirkaV

11

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

див. https://facebook.github.io/react/docs/forms.html


2
Посилання на зовнішні ресурси рекомендуються, але, будь ласка, додайте контекст навколо посилання, щоб ваші колеги користувачі мали уявлення про те, що це таке і чому воно існує. Завжди цитуйте найбільш релевантну частину важливого посилання на випадок, якщо цільовий сайт недоступний або перебуває постійно в режимі офлайн. Дивіться, як написати гарну відповідь
Пітер Рейд

Використання àntdформ. Це допомогло.
Едуард

8

Я бачу, що ви використовуєте jQuery для ініціалізації форми.

Коли я спробую відповідь @KyungHun Jeon, мені це не працює, які також використовують jQuery.

Отже, я спробував додати форму до тіла за допомогою способу jQuery:

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

І це спрацювало!


6

На що слід звернути увагу, якщо ви бачите це в 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>

Умови гонки!
pianoJames

2

Я зіткнувся з тим же питанням в одному з наших впроваджень.

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

ми використовували ту саму відповідь, подану вище, і вставляли

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

і це спрацювало. Дякую.


1

Залежно від відповіді від KyungHun Jeon, але appendChild очікує вузол dom, тому додайте індекс до jquery об'єкта, щоб повернути вузол: document.body.appendChild(form[0])


2
Ви маєте на увазі document.body.appendChild(form[0])?
efeder

1

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

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

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


1

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


Це попередження: подання форми скасовано, оскільки форма не підключена. Вибачте, що забули додати це.
Ісая Ларсен

1
Я можу це підтвердити. Я отримував таке ж попередження в React, Form submission canceled because the form is not connectedколи натискав кнопку "Скасувати" форми. Після додавання type="button"до кнопки «Скасувати» я більше не отримую попередження. Дякую!
Бен


0

Ви також можете вирішити це, застосувавши один патч у jquery-xxxjs, просто додавши після рядка "try {rp;} catch (m) {}" 1833 цей код:

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

Це підтверджує, коли форма не є частиною тіла, і додає її.


0

Я помітив, що отримую цю помилку, оскільки мій HTML-код не мав <body>тегу.

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


-1

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

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.