Obtenir une erreur "L'envoi du formulaire a été annulé car le formulaire n'est pas connecté"

Question

J'ai un ancien site web avec JQuery 1.7 qui fonctionnait correctement jusqu'à il y a deux jours. Soudainement, certains de mes boutons ne fonctionnent plus et, après avoir cliqué dessus, j'obtiens cet avertissement dans la console :

La soumission du formulaire a été annulée car le formulaire n'est pas connecté

Le code derrière le clic ressemble à ceci :

 this.handleExcelExporter = function(href, cols) {
   var form = $('').attr('action', href);
   $('input[name="layout"]', form).val(JSON.stringify(cols));
   $('input[type="submit"]', form).click();
 }

Il semble que Chrome 56 ne prend plus en charge ce type de code. N'est-ce pas ? Si oui, ma question est la suivante :

1. Pourquoi cela s'est-il produit soudainement ? Sans aucun avertissement de dépréciation ?
2. Quelle est la solution de contournement pour ce code ?
3. Existe-t-il un moyen de forcer Chrome (ou d'autres navigateurs) à fonctionner comme avant sans modifier le code ?

P.S. Cela ne fonctionne pas non plus dans la dernière version de Firefox (sans aucun message). Cela ne fonctionne pas non plus dans IE 11.0 & Edge ! (tous deux sans aucun message)

Answer 1

Réponse rapide : ajoutez le formulaire au body.

document.body.appendChild(form);

Ou, si vous utilisez jQuery comme ci-dessus : $(document.body).append(form);

Détails : Selon les normes HTML, si le formulaire n'est pas associé au contexte de navigation (document), l'envoi du formulaire sera interrompu.

SPEC HTML voir 4.10.21.3.2

Dans Chrome 56, cette spécification a été appliquée.

Différence de code Chrome voir @@ -347,9 +347,16 @@

P.S à propos de votre question #1. À mon avis, contrairement à ajax, l'envoi du formulaire entraîne un déplacement instantané de la page.
Ainsi, afficher un 'message d'avertissement obsolète' est presque impossible.
Je pense aussi qu'il est inacceptable que ce changement majeur ne soit pas inclus dans la liste des changements de fonctionnalités. Fonctionnalités Chrome 56 - www.chromestatus.com/features#milestone%3D56

Answer 2

Si vous rencontrez cette erreur dans React JS lorsque vous essayez de soumettre le formulaire en appuyant sur la touche Entrée, assurez-vous que tous vos boutons dans le formulaire qui ne soumettent pas le formulaire ont un type = "button".

Si vous n'avez qu'un seul bouton avec type = "submit" en appuyant sur Entrée soumettra le formulaire comme prévu.

Références:
https://dzello.com/blog/2017/02/19/demystifying-enter-key-submission-for-react-forms/ https://github.com/facebook/react/issues/2093

Answer 3

Inclure alternativement event.preventDefault();dans votre handleSubmit(event) {

voir https://facebook.github.io/react/docs/forms.html

Answer 4

Vous devez vous assurer que le formulaire se trouve dans le document. Vous pouvez ajouter le formulaire au corps du document.

Answer 5

Je vois que vous utilisez jQuery pour l'initialisation du formulaire.

Quand j'essaie la réponse de @KyungHun Jeon, ça ne fonctionne pas pour moi qui utilise aussi jQuery.

Donc, j'ai essayé d'ajouter le formulaire au corps en utilisant la méthode jQuery:

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

Et ça a marché!