FormData creado a partir de un formulario existente parece vacío cuando lo registro

Solución:

Actualizar: la especificación XHR ahora incluye varias funciones más para inspeccionar objetos FormData.

FireFox ha admitido las funciones más nuevas desde v39.0, Chrome está programado para obtener soporte en v50. No estoy seguro de otros navegadores.

var form = document.querySelector('form');
var formData = new FormData(form);

for (var [key, value] of formData.entries()) { 
  console.log(key, value);
}

//or

console.log(...formData)

También me enfrenté al mismo problema. No pude ver en la consola. Debe agregar lo siguiente a la solicitud ajax, por lo que se enviarán los datos

processData: false, contentType: false 

Pero console.log(formData) muestra formData esta vacio.

¿Qué quieres decir con “vacío”? Cuando pruebo esto en Chrome, muestra ‣ FormData {append: function} … lo que quiere decir que es un objeto FormData, que es lo que esperábamos. Hice un violín y lo expandí para codificar esto:

var form = document.querySelector('form'),
    formData = new FormData(form),
    req = new XMLHttpRequest();

req.open("POST", "/echo/html/")
req.send(formData);

… y esto es lo que vi en el panel Red de herramientas para desarrolladores de Chrome:

Entonces el código está funcionando como se esperaba.

Creo que la desconexión aquí es que espera que FormData funcione como un objeto o matriz de JavaScript vanilla y le permita mirar y manipular directamente su contenido. Lamentablemente, no funciona así: FormData solo tiene un método en su API pública, que es append. Prácticamente todo lo que puede hacer con él es crearlo, agregarle valores y pasarlo a una XMLHttpRequest.

Si desea obtener los valores del formulario de una manera que pueda inspeccionar y manipular, tendrá que hacerlo a la antigua: iterando a través de los elementos de entrada y obteniendo cada valor uno por uno, o usando un función escrita por otra persona, por ejemplo, jQuery’s. Aquí hay un hilo SO con algunos enfoques para eso: ¿Cómo puedo obtener datos de formulario con JavaScript / jQuery?

---

---

Utiliza Nuestro Buscador