Zugriff auf FormData-Werte

Question

Ich habe ein FormData-Objekt, das ich in javascript von einem HTML Formular wie folgt erstellen. Das FormData Objekt scheint nicht sehr gut dokumentiert zu sein (es kann nur sein, dass ich die falschen Dinge suche!).

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

Meine Frage

Wie greife ich auf die verschiedenen Eingangswerte dieses FormData Objekt, bevor ich es abzuschicken? Z.B. form.name greift auf den Wert zu, der am Eingang mit dem Namen form.name eingegeben wurde.

Answer 1

Es scheint, dass Sie keine Werte des Formularelements mit FormData abrufen können.

Der FormData Objekt können Sie einen Satz von Schlüssel/Wert-Paare kompilieren XMLHttpRequest mit senden. Sein erster Linie für den Einsatz in Daten Senden Form, sondern kann unabhängig von Formen verwendet werden, um getasteten Daten zu übertragen. Die gesendeten Daten werden in dem gleichen Format, das die Form der () Methode einreichen würde, um die Daten zu senden, wenn das Codiertyp des Formulars auf „multipart/form-data“ gesetzt wurden.

auch immer Sie es mit einfachen Javascript wie diese

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

Answer 2

Das erste, was erreichen kann, ich glaube nicht, es ist möglich, eine Formdata-Objekt aus einer Form zu bauen, wie Sie angegeben haben, und Werte zu erhalten aus dem Formular die in der angenommenen Antwort beschriebene Methode verwenden - dies ist eher ein Nachtrag!

Es aussieht wie du kann aus einem Formdata-Objekt einige Daten erhalten:

var formData = new FormData(); 
formData.append("email", "test1@test.com"); 
formData.append("email", "test2@test.com"); 
formData.get("email"); 

Leider wird dies nur gibt die ersten Artikel für diesen Schlüssel in diesem Fall kehrt es test1 @ test.com‘

Bitte beachten Sie auch: MDN article on formdata get method

hoffe, das hilft!

Beachten Sie auch, dass, wenn Sie diese in Chrom testen möchten, werden Sie die experimentelle Web ermöglichen müssen Features Flagge:

Hinweis: Chrome-Unterstützung für andere Verfahren als append derzeit hinter ist die „Enable Experimental Web Platform Features "kennzeichnen.

MDN page; in the browser compatibility section

Answer 3

einfach zur vorherigen Lösung von @ Jeff Daze hinzufügen - Sie FormData.getAll verwenden können („key name“) Funktion ALLE der Daten aus dem Objekt abzurufen .

Answer 4

FormData.get tun, was Sie wollen, in einer kleinen Teilmenge von Browsern - schauen Sie sich die Browser-Kompatibilitätstabelle an, um zu sehen welche (derzeit nur Chrome 50+ und Firefox 39+). Angesichts dieser Form:

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

Sie den Wert dieser Eingabe zugreifen können über

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

Answer 5

ist dies eine Lösung, die die Schlüssel-Wert-Paare aus der Formdata abzurufen:

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

Answer 6

Ein weiterer Lösung:
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); 
});