Obtenir une erreur " soumission de formulaire annulée car le formulaire n'est pas connecté"
J'ai un ancien site Web avec JQuery 1.7 qui fonctionne correctement jusqu'à il y a deux jours. Soudain, certains de mes boutons ne fonctionnent plus et, après avoir cliqué dessus, je reçois cet avertissement dans la console:
Envoi de formulaire annulé parce que le formulaire n'est pas connecté
Le code derrière le clic est quelque chose comme ceci:
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();
}
Il semble que Chrome 56 ne supporte plus ce type de code. N'est-ce pas? Si oui ma question Est:
- pourquoi cela arrivé tout d'un coup? Sans aucun avertissement de dépréciation?
- Quelle est la solution de contournement pour ce code?
- Existe-t-il un moyen de forcer chrome (ou d'autres navigateurs) à fonctionner comme avant sans changer de code?
P. S. Cela ne fonctionne pas non plus dans la dernière version de firefox (sans aucun message). En outre, il ne fonctionne pas dans IE 11.0 et Edge! (les deux sans aucun message)
9 réponses
Réponse rapide: ajoutez le formulaire au corps.
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), la soumission du formulaire sera annulée.
Spécifications HTML voir 4.10.21.3.2
Dans Chrome 56, cette spécification a été appliquée.
Chrome code diff voir @@ -347,9 +347,16 @@
P. S sur votre question # 1. À mon avis, contrairement à ajax, la soumission de formulaire provoque un déplacement de page instantané.
Donc, montrer 'message d'avertissement obsolète' est presque impossible.
Je pense aussi qu'il est inacceptable que ce changement sérieux ne soit pas inclus dans la liste des changements de fonctionnalités. Chrome 56 caractéristiques - www.chromestatus.com/features#milestone%3D56
Vous devez Vous assurer que le formulaire est dans le document. Vous pouvez ajouter le formulaire au corps.
Je vois que vous utilisez jQuery pour l'initialisation du formulaire.
Quand j'essaie la réponse de @KyungHun Jeon, cela ne fonctionne pas pour moi qui utilise jQuery aussi.
Donc, j'ai essayé d'ajouter le formulaire au corps en utilisant la manière jQuery:
$(document.body).append(form);
Et ça a marché!
Si vous voyez cette erreur dans React JS lorsque vous essayez de soumettre le formulaire en appuyant sur Entrée, assurez-vous que tous vos boutons du formulaire qui ne le soumettent pas ont un type="button".
Si vous n'avez qu'un seul button avec type="submit" en appuyant sur Entrée, soumettez le formulaire comme prévu.
References:
https://dzello.com/blog/2017/02/19/demystifying-enter-key-submission-react-forms-multiple-buttons/
https://github.com/facebook/react/issues/2093
Vous pouvez également inclure événement.preventDefault(); dans votre handleSubmit (événement) {
En fonction de la réponse de KyungHun Jeon, mais l'appendChild attend un nœud dom, alors ajoutez un index à l'objet jquery pour renvoyer le nœud:
document.body.appendChild(form[0])
J'ai fait face au même problème dans l'une de nos implémentations.
Nous utilisions jquery.forme.js. qui est un plugin de formulaires et disponible ici. http://malsup.com/jquery/form/
, Nous avons utilisé la même réponse fournie ci-dessus et collé
$(document.body).append(form);
Et ça a marché.Grâce.
Vous pouvez également le résoudre, en appliquant un seul patch dans le jquery-x.x.x.js il suffit d'ajouter après " try { rp;} catch (m) {}" ligne 1833 ce code:
if (r instanceof HTMLFormElement &&! r.parentNode) {
r.style.display = "none"; document.body.append (r);
r [p] ();
}
Ceci valide lorsqu'un formulaire ne fait pas partie du corps et l'ajoute.
J'ai vu ce message à l'aide angulaire, donc j'ai juste pris method="post" et action="", et l'avertissement avait disparu.