javascript - validacion - Los datos de formulario creados a partir de un formulario existente parecen estar vacíos cuando lo registro
validar formulario javascript onclick (4)
Esta pregunta ya tiene una respuesta aquí:
- ¿Cómo inspeccionar FormData? 10 respuestas
Estoy intentando obtener un conjunto de claves (nombres de entrada o similares) y valores (valores de entrada) de un formulario web:
<body>
<form>
<input type="text" name="banana" value="swag">
</form>
<script>
var form = document.querySelector(''form'');
var formData = new FormData(form);
</script>
</body>
De acuerdo con la documentación de FormData , formData debe contener las claves y los valores del formulario. Pero console.log(formData) muestra que formData está vacío.
¿Cómo puedo obtener rápidamente los datos del formulario utilizando FormData?
Pero
console.log(formData)muestra queformDataestá vacío.
¿Qué quiere decir con "vacío"? Cuando pruebo esto en Chrome, muestra ‣ FormData {append: function} ... es decir, es un objeto FormData, que es lo que esperábamos. Hice un violín y me 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 de la Red de herramientas para desarrolladores de Chrome:
Así que el código está funcionando como se esperaba.
Creo que la desconexión aquí es que está esperando que FormData funcione como un objeto o matriz de JavaScript de vainilla y le permita ver y manipular directamente su contenido. Desafortunadamente, no funciona así: FormData solo tiene un método en su API pública , que se append . Casi todo lo que puedes hacer con él es crearlo, agregarle valores y pasarlo a un XMLHttpRequest.
Si desea obtener los valores de formulario de una manera que pueda inspeccionar y manipular, tendrá que hacerlo a la antigua usanza: 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. Aquí hay un subproceso SO con algunos enfoques para eso: ¿Cómo puedo obtener datos de formulario con JavaScript / jQuery?
Según la documentación de MDN en FormData
Un objeto que implementa FormData se puede usar directamente en una estructura for ..., en lugar de entries (): for (var p of myFormData) es equivalente a for (var p of myFormData.entries ()).
Iterar sobre FormData.entries () no funcionó para mí.
Esto es lo que hago para verificar si formData está vacío o no:
var isFormDataEmpty= true;
for (var p of formData) {
isFormDataEmpty= false;
break;
}
Como iterando sobre formData le da el archivo cargado, puede usarlo para obtener el nombre del archivo, la validación del tipo de archivo, etc.
También me enfrenté al mismo problema. No pude ver en la consola. Debe agregar lo siguiente a la solicitud ajax, por lo que los datos se enviarán
processData: false, contentType: false
Actualización : 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 acerca de otros navegadores.
var form = document.querySelector(''form'');
var formData = new FormData(form);
for (var [key, value] of formData.entries()) {
console.log(key, value);
}