web-dev-qa-db-fra.com

Accéder aux valeurs FormData

J'ai un objet FormData que je crée dans javascript à partir d'un formulaire HTML comme ceci. L'objet FormData ne semble pas très bien documenté (c'est peut-être moi qui cherche les mauvaises choses!).

var form = new FormData(document.getElementById("form"));

Ma question

Comment accéder aux différentes valeurs d'entrée de cet objet FormData avant de l'envoyer? Par exemple. form.name accède à la valeur entrée dans l'entrée avec le nom form.name.

javascripthtmlform-data
19
StuStirling

Il semble que vous ne puissiez pas obtenir les valeurs de l'élément de formulaire à l'aide deFormData.

L'objetFormDatavous permet de compiler un ensemble de paires clé/valeur à envoyer en utilisant XMLHttpRequest. Il est principalement destiné à être utilisé sous forme d'envoi données, mais peuvent être utilisés indépendamment des formulaires afin de transmettre données de clé. Les données transmises sont dans le même format que celui du formulaire La méthode submit () utiliserait pour envoyer les données si le type de codage du formulaire ont été réglés sur "multipart/form-data".

Cependant, vous pouvez le réaliser en utilisant un code Javascript simple comme celui-ci

var formElements = document.forms['myform'].elements['inputTypeName'].value;
15
Praveen

Première chose, je ne pense pas qu'il soit possible de créer un objet FormData à partir d'un formulaire comme vous l'avez spécifié, et pour obtenir des valeurs du formulaire, utilisez la méthode décrite dans la réponse acceptée - il s'agit davantage d'un addenda!

Il vous semble que peut extraire des données d'un objet formdata:

var formData = new FormData();
formData.append("email", "[email protected]");
formData.append("email", "[email protected]");
formData.get("email");

Malheureusement, ceci retournera seulement le premier élément pour cette clé, dans ce cas, il retournera '[email protected]'

Voir aussi: Article de MDN sur la méthode formdata get

J'espère que cela t'aides!

Notez également que si vous souhaitez tester ceci en chrome, vous devez activer l'indicateur de fonctionnalités Web expérimentales:

Remarque: La prise en charge de Chrome pour les méthodes autres que append est actuellement en retard l'indicateur "Activer les fonctionnalités expérimentales de la plate-forme Web".

page MDN; dans la section de compatibilité du navigateur

13
Jeff Daze

FormData.get fera ce que vous voulez dans un petit sous-ensemble de navigateurs - consultez le tableau de compatibilité des navigateurs pour savoir lesquels (actuellement, seuls Chrome 50+ et Firefox 39+). Compte tenu de cette forme:

<form id="form">
  <input name="inputTypeName">
</form>

Vous pouvez accéder à la valeur de cette entrée via

var form = new FormData(document.getElementById("form"));
var inputValue = form.get("inputTypeName");
7
carpeliam

Pour ajouter à la solution précédente de @Jeff Daze - vous pouvez utiliser la fonction FormData.getAll("key name") pour récupérer toutes les données de l'objet.

7
Oculus Hut

Voici une solution pour récupérer les paires clé-valeur à partir du FormData: 

var data = new FormData( document.getElementById('form') );
data = data.entries();              
var obj = data.next();
var retrieved = {};             
while(undefined !== obj.value) {    
    retrieved[obj.value[0]] = obj.value[1];
    obj = data.next();
}
console.log('retrieved: ',retrieved);
3
Juschel

Une autre solution:
HTML:

<form>
<input name="searchtext"  type="search" >'
<input name="searchbtn" type="submit" value="" class="sb" >
</form>

JS:

$('.sb').click( function() {
    var myvar=document.querySelector('[name="searchtext"]').value;
    console.log("Variable value: " + myvar);
});
0
Erik