🤩 JAVASCRIPT para recuperar los datos de un FORM en 30 segundos
HTML-код
- Опубликовано: 30 мар 2022
- ✅ En apenas 8 líneas de código puedes:
- Escuchar el evento de submit del formulario.
- Evitar su comportamiento por defecto.
- Transformar los datos del formulario a un objeto.
- Usar un alert que jamás deberías usar jajajaja en serio, no lo uses. 😝 Yo lo he hecho por temas de espacio.
👀 ¡Es importante que en el input uses el atributo name para que en el objeto los puedas tener!
💬 ¿Qué quieres que te explique en 30 segundos? ✌️
#shorts 
Наука
![Eminem - Tobey (feat. Big Sean & Babytron) [Official Audio]](http://i.ytimg.com/vi/9xn0OHEZZ8Q/mqdefault.jpg)
me salvaste de un mal momento jajaja
ya me estaba frustrando y no podía avanzar, con este video me ayudaste un montón, GRACIASSS
Ya que estás en ese punto, complementa este vídeo con otro que guarda los datos del formulario en session/localStorage y se restablezcan en cada input en caso de un refresh accidental o provocado. Basecamp y otros servicios web lo hacen y los datos guardados se borran cuando se somete el formulario.
Hola, ¿Donde puedo ver como se hace esto?
Acabo de empezar a estudiar programación, llevo unos 8 meses, y a mis 44 años he de decir que me está gustando mucho. Una pena no haber empezado antes. He empezado a seguirte hace poco y me encanta como enseñas, muy didáctico. Muchas gracias. A ver si en poco tiempo consigo meter cabeza en este sector.
Esta información vale millones
Yo siempre lo hacía con el FormData, como ahí ya me pasaba los datos no había problema si quisiera consumir un api en formato post normal lo aceptaba, pero si uso node esto puedo ser muy útil
Siempre aprendo cosas interesantes con tus videos de JS, gracias
Que ahorro de tiempos y líneas con esta función, gracias, ahora a cambiar todos mis desarrollos.
No es necesario el queryselectorall, se podría hacer con el atributo forms del document y seleccionarlo por el id
muy útil, con esto puedo hacer que cree un archivo json y guarde esos datos, para luego hacer un login pidiendo datos que se registraron
como se hace :(
Una genialiadad y limpio ese código. Gracias!! Lo voy aplicar cuando surga la necesidad.
Muchas gracias Stefano! 🤗
bro diosmio te amo , hice un formulario donde el usuario puede agregar inputs a su conveniencia y necesitaba poder manipular todos esos input antes de mandarlos al backen para ordenarlos , esto me sirve de maravilla
Lo vi en twitter, pero ahora se que si funciona hahaha grande midu
Jajajaja comprobado!!!
Nunca lo habia con un Object for entries, se ve interesante
Ufs lo necesitaba, gracias midu❤️
🙌
Gracias! De hecho en mi trabajo quieren recuperar todos esos datos de forms ahora veré si puedo hacerlo de esta manera
Hay que aclarar que la propiedad mame debe estar presente en el input del formulario
Otro nivel gracias por tus aportes
Gracias a ti Daniel!
No sabes como he aplicado todos tus tips... Gracias midudev...
Eres un crack brother,sigue adelante
Gracias Johnny!!! 🤗
esta me la guardo, me viene de lujo, gracias
me ayudaste mucho
Esto es execelente, cómo no lo vi antes, un saludo colega
La palabra "recuperar" lo la utilizaba de ese modo, para mi recuperar es rescatar algo perdido... Entonces es mas ideal para mi decir "tomar o capturar" los dato del form.
Genial forma hacerlo!! Cabe señalar que los inputs deben tener su respectivo atributo *name*
Sí! Lo puse en la descripción del vídeo, para que quede constancia (aunque la gente debería hacer esto siempre! :D)
Es tan bueno que hay que copiarlo
Hola crack saludos desde México, puedes hacer un vídeo para validación antes de envió de formulario
Gracias, justo ayer necesitaba obtener todos los valores de un input y hay me ves trayendo cada value de los 10 inputs xD
Excelente!
Me pregunto, como se optimizaría la validación dinámica de estos datos siguiendo este tip?
Gracias Midu , cuando vienes a Mexico para invitarte unos tacos?, después de tantas salvadas xD
esto me hace amar aun mas a Vuejs
Héroe sin capa
Muy interesante 🫶
Gracias por comentar
Mi pregunta sobre esto es como usar esos datos para procesarlos en otras funciones, ya que la constante no existe fuera del query selector
Supongo que puedes tener una función en donde la vas a necesitar y la ejecutas desde el querySelector y se la pasas como argumento. Salgo así como myFunction(data). Otra opción es que tengas una variable por ejemplo let data = {}; en el scope global de tu archivo y desde el querySelector la sobrescribes y ya la tienes disponible en otros lugares, y así.
Buenísimooo
Maravilloso 😘
Oro pure mi DUDEV Thanks
Yo todavía no entiendo para donde va los datos que se escríben en el formulario
Que buen video
Grande Midu
Gracias Justin! 🤗
Hola hola! Me pareció bastante genial, me gustaría saber si pudieras compartir en que me momento has optado por utilizar esto que nos muestras. Muchas gracias!
He optado casi siempre. 🤣 Es la mejor forma de recuperar todos los datos de un formulario sin necesidad de ir uno por uno. En proyectos con React igual no lo he necesitado tanto porque hay otras formas...
@@midudev muchas gracias!!!
Excelente!!!!!!❤
Excelente
Oye y como se ponen los cuadros de texto, osea se las cajitas esas dónde se ingresa el texto esque apenas me están enseñando a usar Javascript y no sé cómo se añaden y no le entendí al profe
Ooo podemos no usar el form y llamar a una API pasándole los datos que necesites. No saber que el form causaba un reload me hizo sufrir mucho como junior, al punto que ya no quiero usarlo nunca más.
Grande midu
Gracias Danny! 🤗
Cómo lo envío a un correo esos datos ?
Me fa funcionado pero tengo un checkbox de multiples valores pero solo me guarda el ultimo, si uso Jquery si carga todos
supongo que es pq se crea un objeto basado en key valor de modo que como el key es igual se va reemplazando, supongo que mi objeto debe anidar otro objeto
Sirve para otras cositas?
Una pregunta, ¿aun asi se envian los datos a la zona de backend?
¿Al final no de envía? XD
Pero cuando le pones un id al form ya los tienes en un objeto
Y si lo quiero guardar en un txt?
como se saca esa flecha?
Disculpen soy nuevo donde busco eso?
Dónde veo los datos?
Para archivos también aplica?
Y dónde veo los datos
Y uno sacando el valor de cada input 😅
Cómo hacer un login con base de datos!
Es necesario el atributo name para esto?
Sip!
00:00
Eso si que es un programador Senior, con código limpio y escalable. Como me gustaría tenerte al lado.
Niceee
Ayuda me regresa un array vacioo
⇒ no mms
⭐⭐⭐⭐⭐