Espero que la semana los haya visto a todos bien y que se estén preparando para un gran fin de semana. Tuve que retomar el aprendizaje de js y el nuevo aprendizaje de ajax recientemente y tengo una pregunta simple que parece que no puedo resolver.

Tome este formulario de muestra aquí ->

 <form action="", method="post", onsubmit="return submitData(this)"> First Name: <br> <input type="text" name="firstname"> <br> Last Name: <br> <input type="text" name="lastname"> <br> Age: <br> <input type="text" name="age"> <br> <input type="submit" id="buttonOne" value="Submit"> </form>

He estado pasando la mañana familiarizándome con las clases XMLHttpRequest() y FormData() y tengo los siguientes fragmentos súper simples

 function submitData(fdata) { var formData = new FormData(fdata); for (var pair of formData.entries()) { console.log( pair[0] + ' - ' + pair[1] ); } }

Y

 var formData = new FormData(); formData.append('key_1', 'First value'); formData.append('key_2', 'Second value'); formData.append('key_3', 'Third value'); for (var pair of formData.entries()) { console.log( pair[0] + ' - ' + pair[1] ); }

El inferior, donde creo los datos del formulario, muestra los datos en la consola correctamente mediante programación. El superior donde trato de extraer los datos del formulario no funciona. ¿Podría alguien analizar lo que está sucediendo aquí y señalar los errores en mi forma de pensar, por favor? Gracias