javascript - serialize - Accediendo a los valores de FormData

formdata w3schools

Question

Tengo un objeto FormData que creo en javascript desde un formulario HTML como tal. El objeto FormData no parece muy bien documentado (¡puede que solo sea yo buscando cosas incorrectas!).

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

Mi pregunta

¿Cómo accedo a los diferentes valores de entrada de este objeto FormData antes de enviarlo? P.ej. form.name accede al valor que se ingresó en la entrada con el nombre form.name .

Answer 1

En primer lugar, no creo que sea posible compilar un objeto FormData a partir de un formulario como usted lo especificó, y obtener valores del formulario utilizando el método descrito en la respuesta aceptada. ¡Esto es más bien un apéndice!

Parece que puedes obtener algunos datos de un objeto formdata:

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

Desafortunadamente, esto solo devolverá el primer elemento para esa clave, en este caso devolverá ''[email protected]''

Vea también: Artículo de MDN sobre el método de obtención de datos formdata

¡Espero que esto ayude!

También tenga en cuenta que si desea probar esto en Chrome, tendrá que habilitar el indicador de funciones web experimentales:

Nota: la compatibilidad de Chrome con otros métodos distintos a los apéndices se encuentra actualmente detrás del indicador "Habilitar características de plataforma web experimental"

Página MDN; en la sección de compatibilidad del navegador

Answer 2

Esta es una solución para recuperar los pares clave-valor de 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 3

Otra solución:
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);
});

Answer 4

Parece que no puede obtener los valores del elemento de formulario utilizando FormData .

El objeto FormData permite compilar un conjunto de pares clave / valor para enviar usando XMLHttpRequest. Se destina principalmente al uso en el envío de datos de formularios, pero se puede usar independientemente de los formularios para transmitir datos con clave. Los datos transmitidos tienen el mismo formato que el método submit () del formulario que se usaría para enviar los datos si el tipo de codificación del formulario se configuró como "multipart / form-data".

Sin embargo, puedes lograrlo usando un Javascript simple como este.

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

Answer 5

Solo para agregar a la solución anterior de @Jeff Daze, puede usar la función FormData.getAll("key name") para recuperar todos los datos del objeto.

Answer 6

FormData.get hará lo que quieras en un pequeño subconjunto de navegadores: mira la tabla de compatibilidad del navegador para ver cuáles (actualmente solo son Chrome 50+ y Firefox 39+). Dada esta forma:

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

Puede acceder al valor de esa entrada a través de

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