web-dev-qa-db-fra.com

Obtenir une erreur "Envoi du formulaire annulé 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 du formulaire annulé car le formulaire n'est pas connecté

Le code derrière le clic ressemble à 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:

  1. Pourquoi est-ce arrivé soudainement? Sans 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). En outre, cela ne fonctionne pas dans IE 11.0 et Edge! (les deux sans aucun message)

javascriptjquerygoogle-chromejquery-1.7
121
Mahmoud Moravej

si vous voyez cette erreur dans React JS lorsque vous essayez de soumettre le formulaire en appuyant sur Entrée, assurez-vous que tous les boutons du formulaire qui ne soumettent pas le formulaire ont un type="button". 

Si vous n'avez qu'une seule variable button avec type="submit", appuyez sur Entrée pour soumettre le formulaire comme prévu.

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

18
vaskort

Vous devez vous assurer que le formulaire est dans le document. Vous pouvez ajouter le formulaire au corps.

11
Liu Tao

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

Lorsque j'essaie la réponse de @KyungHun Jeon, cela ne fonctionne pas pour moi si j'utilise jQuery également.

J'ai donc essayé d'ajouter le formulaire au corps en utilisant la méthode jQuery:

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

Et ça a marché!

8
Rizki Pratama

sinon, inclure event.preventDefault (); dans votre handleSubmit (event) {

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

6
joncode

Une chose à surveiller si vous voyez ceci dans React est que le <form> doit toujours être restitué dans le DOM pendant la soumission. c'est-à-dire que cela va échouer

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

Ainsi, lorsque le formulaire est soumis, state.submitting est défini et que le message "soumettre ..." s'affiche à la place du formulaire. Cette erreur se produit.

Déplacer l’étiquette de formulaire en dehors de la condition garantissait qu’elle était toujours là au besoin, c.-à-d.

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

J'ai rencontré le même problème dans l'une de nos applications.

nous utilisions jquery.forms.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 cela a fonctionné. Merci.

1
Abhinav Chawla

En fonction de la réponse de KyungHun Jeon, mais appendChild attend un nœud dom. Ajoutez donc un index à l'objet jQuery pour renvoyer le nœud: document.body.appendChild(form[0]).

1
moti irom

ajoutez attribut type = "button" au bouton sur qui clique vous voyez l’erreur, cela a fonctionné pour moi.

0
Tayyab Mehar

Vous pouvez également le résoudre, en appliquant un patch unique dans le fichier jquery-x.x.x.js, ajoutez-le après le code "try {rp;} catch (m) {}", ligne 1833: 

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

Ceci valide le moment où un formulaire ne fait pas partie du corps et l'ajoute.

0
Gaytan

Ajout pour la postérité puisque ce n’est pas lié au chrome, mais c’était le premier fil de discussion apparu sur Google lors de la recherche de cette erreur de soumission de formulaire. 

Dans notre cas, nous avons associé une fonction pour remplacer l'actuel div html par une animation de "chargement" lors de la soumission. Comme elle se produisait avant la soumission du formulaire, il n'y avait plus de formulaire ni de données à soumettre. 

Rétrospectivement, erreur très évidente, mais si quelqu'un finissait ici, cela pourrait leur faire gagner un peu de temps. 

0
Matt H