Accès aux valeurs FormData

J'ai un objet FormData que je crée dans javascript à partir d'un HTML formulaire comme si. Le FormData objet ne semble pas très bien documenté (c'est peut être juste moi, à la recherche des choses fausses!).

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

Ma Question

Comment puis-je accéder aux différentes valeurs d'entrée de cette FormData objet avant de me l'envoyer? Par exemple. form.name accède à la valeur qui a été entré dans l'entrée avec le nom form.name.

source d'informationauteur StuStirling

  1. 11

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

    La FormData objet vous permet de compiler un ensemble de paires clé/valeur à envoyer
    à l'aide de XMLHttpRequest. Son principalement pour une utilisation dans l'envoi de formulaire
    de données, mais peut être utilisé de façon indépendante à partir des formulaires afin de transmettre
    incrustée de données.     Les données transmises sont dans le même format que la forme de l'
    méthode submit() serait de l'utiliser pour envoyer les données si le formulaire type de codage
    ont été mis à "multipart/form-data".

    Cependant, vous pouvez la réaliser à l'aide de Javascript simple comme ça

    var formElements = document.forms['myform'].elements['inputTypeName'].value;
  2. 9

    Première chose que je ne pense pas qu'il est possible de construire un objet FormData à partir d'un formulaire que vous avez spécifié, et d'obtenir des valeurs du formulaire utiliser la méthode décrite dans la accepté de répondre -- c'est plus un additif!

    Il semble que vous peut obtenir certaines données d'un objet formdata:

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

    Malheureusement, cela ne fera que retourner le première point pour cette clé, dans ce cas, il sera de retour '[email protected]'

    Veuillez voir aussi: MDN article sur formdata méthode get

    Espérons que cette aide!

    Notez également que si vous souhaitez tester ce dans chrome, vous devrez activer le web expérimentale des caractéristiques drapeau:

    Note: Chrome soutien à des méthodes autres que l'ajout est actuellement derrière
    "Activer Web Expérimentale Fonctionnalités de la Plateforme" pavillon.

    MDN page; dans la compatibilité du navigateur section

  3. 7

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

  4. 5

    FormData.obtenez de l' à faire ce que vous voulez dans un petit sous-ensemble de navigateurs - consulter le tableau de compatibilité du navigateur pour voir ceux qui (actuellement uniquement 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");
  5. 0

    C'est une solution pour récupérer les paires clé-valeur de la 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);
  6. 0

    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);
});