web-dev-qa-db-fra.com

FormData créé à partir d'un formulaire existant semble vide lorsque je l'enregistre

J'essaie d'obtenir un ensemble de clés (noms d'entrée ou similaires) et de valeurs (valeurs d'entrée) à partir d'un formulaire Web:

<body>
  <form>
    <input type="text" name="banana" value="Swag">
  </form>

  <script>
    var form = document.querySelector('form');
    var formData = new FormData(form);
  </script>
</body>

Selon la documentation FormData , formData devrait contenir les clés et les valeurs du formulaire. Mais console.log(formData) indique que formData est vide.

Comment puis-je obtenir rapidement les données du formulaire à l'aide de FormData?

JSFiddle

javascriptform-data
36
mikemaccana

Update : la spécification XHR inclut maintenant plusieurs fonctions supplémentaires pour inspecter les objets FormData.

FireFox prend en charge les nouvelles fonctions depuis la v39. , Chrome est censé obtenir une prise en charge dans la v5 . Pas sûr des autres navigateurs.

var form = document.querySelector('form');
var formData = new FormData(form);

for (var [key, value] of formData.entries()) { 
  console.log(key, value);
}

//or

console.log(...formData)
78
Farray

J'ai aussi fait face au même problème. Je n'ai pas pu voir sur la console. Vous devez ajouter ce qui suit à la demande ajax pour que les données soient envoyées

processData: false, contentType: false
9
Lingasamy Sakthivel

Mais console.log(formData) indique que formData est vide.

Qu'entendez-vous par "vide"? Lorsque je teste ceci dans Chrome, il montre ‣ FormData {append: function} ... c'est-à-dire un objet FormData, ce à quoi nous nous attendions. J'ai fait un violon et développé pour coder en ceci :

var form = document.querySelector('form'),
    formData = new FormData(form),
    req = new XMLHttpRequest();

req.open("POST", "/echo/html/")
req.send(formData);

... et c’est ce que j’ai vu dans le panneau Chrome

HTTP request

Donc, le code fonctionne comme prévu.

Je pense que la déconnexion ici est que vous vous attendez à ce que FormData fonctionne comme un objet ou un tableau Vanilla JavaScript et vous permet de regarder et de manipuler directement son contenu. Malheureusement, cela ne fonctionne pas comme cela - FormData n'a qu'une méthode dans son API publique , qui est append. En gros, tout ce que vous pouvez faire avec elle est de le créer, de lui ajouter des valeurs et de le transmettre à XMLHttpRequest.

Si vous souhaitez obtenir les valeurs de formulaire de manière à pouvoir les inspecter et les manipuler, vous devrez le faire à l'ancienne: en itérant les éléments d'entrée et en obtenant chaque valeur une par une, ou en utilisant un fonction écrite par quelqu'un d'autre, par exemple jQuery's. Voici un fil SO) avec quelques approches: Comment puis-je obtenir des données de formulaire avec JavaScript/jQuery?

8
Jordan Running

Selon la documentation MDN sur FormData

Un objet implémentant FormData peut être directement utilisé dans une structure for ... of, à la place de entries (): for (var p de myFormData) est équivalent à for (var p de myFormData.entries ()).

Itérer sur FormData.entries () n'a pas fonctionné pour moi.

Voici ce que je fais pour vérifier si formData est vide ou non:

                var isFormDataEmpty= true;
                for (var p of formData) {
                    isFormDataEmpty= false;
                    break;
                }

Comme itération sur formData vous donne le fichier téléchargé, vous pouvez l'utiliser pour obtenir le nom du fichier, la validation du type de fichier, etc.

4
Sudarshan_SMD