Tengo el siguiente código:
const formSubmit = (e) => { console.log("form submitted") e.preventDefault() const formData = new FormData(e.target) console.log(formData.get('firstName')) console.log(formData.get('lastName')) } document.querySelector('form').addEventListener('submit', formSubmit) <form> <input name="firstName" /> <input name="lastName" /> <button type="submit"> Create User </button> </form>Quiero poder acceder a firstName y lastName tan simple como:
console.log(formData.firstName) console.log(formData.lastName) Sin embargo, no puedo, porque new FormData() devuelve algo (no estoy seguro de qué tipo de datos devuelve, ¿un mapa?).
¿Cómo convertir este valor devuelto en un objeto, para poder acceder a sus propiedades tan simple como se describe arriba?
entonces FormData() crea un nuevo objeto con métodos más sobre API FormData y aquí tienes más sobre Fecha y métodos . Espero que esto ayude.
const userForm = document.querySelector('form'); const handleSubmit = (event) => { event.preventDefault(); const userFormData = new FormData(event.target); const today = new Date().toLocaleString('en-GB', { timeZone: 'UTC'}); userFormData.append('date', today); userFormData.forEach((value, key) => { console.log(key, value); }); }; userForm.addEventListener('submit', handleSubmit); <form method="post" action=""> <input name="firstName" type="text" placeholder="First name"/> <input name="lastName" type="text" placeholder="Last name"/> <button typu="submit">Create new User</button> </form>Encontré la solución, todo lo que tienes que hacer es usar
Object.fromEntries(formData)ex:
const formSubmit = (e) => { console.log("form submitted") e.preventDefault() const formData = new FormData(e.target) console.log(Object.fromEntries(formData)) } document.querySelector('form').addEventListener('submit', formSubmit) <form> <input name="firstName" /> <input name="lastName" /> <button type="submit"> Create User </button> </form>