🤩 JAVASCRIPT para recuperar los datos de un FORM en 30 segundos
ฝัง
- เผยแพร่เมื่อ 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 - วิทยาศาสตร์และเทคโนโลยี
![Fresher's Frontend Interview 🎉 | JavaScript | #reactjs (Mock) [Most Asked Questions -2023]](/img/n.gif)
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
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.
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?
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
No es necesario el queryselectorall, se podría hacer con el atributo forms del document y seleccionarlo por el id
Siempre aprendo cosas interesantes con tus videos de JS, gracias
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
Que ahorro de tiempos y líneas con esta función, gracias, ahora a cambiar todos mis desarrollos.
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 :(
Hay que aclarar que la propiedad mame debe estar presente en el input del formulario
Es tan bueno que hay que copiarlo
Lo vi en twitter, pero ahora se que si funciona hahaha grande midu
Jajajaja comprobado!!!
Una genialiadad y limpio ese código. Gracias!! Lo voy aplicar cuando surga la necesidad.
Muchas gracias Stefano! 🤗
Nunca lo habia con un Object for entries, se ve interesante
Gracias! De hecho en mi trabajo quieren recuperar todos esos datos de forms ahora veré si puedo hacerlo de esta manera
No sabes como he aplicado todos tus tips... Gracias midudev...
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.
Me pregunto, como se optimizaría la validación dinámica de estos datos siguiendo este tip?
Ufs lo necesitaba, gracias midu❤️
🙌
Esto es execelente, cómo no lo vi antes, un saludo colega
Yo todavía no entiendo para donde va los datos que se escríben en el formulario
Gracias Midu , cuando vienes a Mexico para invitarte unos tacos?, después de tantas salvadas xD
Otro nivel gracias por tus aportes
Gracias a ti Daniel!
me ayudaste mucho
esta me la guardo, me viene de lujo, gracias
Hola crack saludos desde México, puedes hacer un vídeo para validación antes de envió de formulario
Eres un crack brother,sigue adelante
Gracias Johnny!!! 🤗
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
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)
Héroe sin capa
esto me hace amar aun mas a Vuejs
Que buen video
Gracias, justo ayer necesitaba obtener todos los valores de un input y hay me ves trayendo cada value de los 10 inputs xD
Excelente!
como se saca esa flecha?
Buenísimooo
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í.
Muy interesante 🫶
Gracias por comentar
Disculpen soy nuevo donde busco eso?
Para archivos también aplica?
Maravilloso 😘
Y si lo quiero guardar en un txt?
Sirve para otras cositas?
Dónde veo los datos?
Excelente!!!!!!❤
Cómo lo envío a un correo esos datos ?
Pero cuando le pones un id al form ya los tienes en un objeto
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.
Oro pure mi DUDEV Thanks
Y dónde veo los datos
Excelente
Grande Midu
Gracias Justin! 🤗
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
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!!!
Una pregunta, ¿aun asi se envian los datos a la zona de backend?
¿Al final no de envía? XD
Cómo hacer un login con base de datos!
Grande midu
Gracias Danny! 🤗
Ayuda me regresa un array vacioo
Es necesario el atributo name para esto?
Sip!
Y uno sacando el valor de cada input 😅
Niceee
Eso si que es un programador Senior, con código limpio y escalable. Como me gustaría tenerte al lado.
⇒ no mms
00:00
⭐⭐⭐⭐⭐