Accesso ai dati dei dati dei moduli

Question

Ho un oggetto FormData che creo in javascript da un modulo HTML in questo modo. L'oggetto FormData non sembra molto ben documentato (potrebbe essere solo io che sto cercando le cose sbagliate!).

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

La mia domanda

Come posso accedere ai diversi valori di ingresso di questo oggetto FormData prima di inviare fuori? Per esempio. form.name accede al valore immesso nell'input con il nome form.name.

Answer 1

Sembra che non sia possibile ottenere valori dell'elemento modulo utilizzando FormData.

L'oggetto FormData consente di compilare una serie di coppie chiave/valore per inviare utilizzando XMLHttpRequest. Principalmente previsto per l'invio dei dati del modulo , ma può essere utilizzato indipendentemente dai moduli per trasmettere i dati con chiave . I dati trasmessi sono nello stesso formato utilizzato dal metodo submit() del modulo per inviare i dati se il tipo di codifica del modulo era impostato su "multipart/form-data".

Tuttavia si può raggiungere utilizzando semplici Javascript come questo

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

Answer 2

prima cosa non credo che sia possibile costruire un oggetto formdata da un modulo come hai specificato, e per ottenere i valori dal modulo utilizzare il metodo descritto nella risposta accettata - questo è più di un addendum!

Sembra che tu può ottenere alcuni dati da un oggetto formdata:

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

Purtroppo, questo restituisce solo il primo elemento per quella chiave, in questo caso si tornerà 'test1 @ test.com'

Si veda anche: MDN article on formdata get method

Spero che questo aiuti!

noti inoltre che se si vuole testare questo in cromo dovrete abilitare il web sperimentale Flag:

Nota: il supporto Chrome per metodi diversi di accodamento è attualmente dietro l'opzione "Abilita Sperimentale Flag "Caratteristiche piattaforma Web".

MDN page; in the browser compatibility section

Answer 3

solo per aggiungere alla soluzione precedente da @Jeff Daze - è possibile utilizzare il FormData.getAll ("nome della chiave") funzione per recuperare TUTTI dei dati dall'oggetto .

Answer 4

FormData.get farà quello che vuoi in un piccolo sottoinsieme di browser - guarda la tabella di compatibilità del browser per vedere quali (attualmente solo Chrome 50+ e Firefox 39+). Dato questo modulo:

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

È possibile accedere al valore di quella di ingresso tramite

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

Answer 5

questa è una soluzione per recuperare le coppie chiave-valore dal 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); 

Answer 6

altro soluzione:
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); 
});