Programar Formularios Dinámicos en HTML y JavaScript

[@hdeleonnet]

Mis cursos de Programación: hdeleon.net/cursos-premium/

[@hawaranghamada2220]

El próximo éxito de Héctor de León - A quién le importa ¿cómo programe? A quién le importa ¿cómo lo haga? Yo soy así... Así programaré

[@kzual]

Ya se que a Héctor De León no le importa mi comentario ni que opine yo. Por eso es que vengo a ver sus videos y le doy like de una. Grande Héctor, gracias por enseñarnos, entretenernos y NO intentar ser políticamente correcto.

[@materialknight]

Por accesibilidad, en usen el atributo for, dándole como valor el id de su respectivo , por ejemplo: JavaScript Eso hace que los lectores de pantalla identifiquen y hagan saber que tal describe tal , y también hace que al tocar o clicar el se marque su respectivo (en este caso, tocar o clicar el texto "JavaScript" hace que se marque su respectivo botón de opción). También, en vez de usar el atributo for, se puede lograr el mismo efecto simplemente envolviendo el con el , así: JavaScript

[@enriqueazarquiel]

Interesante el video, quería comentar unas cosillas ya que en mi trabajo he tenido que implementar un formulario genérico dada una configuración similar a un json, puedes incluir eliminar controles añadir de forma dinámica hacer a aparecer o desaparecer elementos, etc. Una especie de macromonstruo (en angular con primeng). Y quería aportar mi opinión sobre estos temas a esto en España se le llama hacer una churrera (maquina de hacer churros) llevado a la practica el quiero algo generico que haga cosas magicas es imposible de mantener en el tiempo ya que las necesidades van en aumento y cada vez es mas complicado. Expongo mi caso (perdonar por lo pesado que soy) primer formulario formulario dinamico que puedas incorporar controles y que estos se bindeen a un objeto de salida (controles de primeng) controles tipicos cuadros de textos, labels, control de errores, algún dropdown. segunda necesidad quiero elementos agrupadores típicos como acordeones y fieldset si incorporan son mas elementos pero puede ademas se aplican determinadas mejoras de eventos primer problema que se da y no es fácil de gestionar por como esta montado con las referencias de los arrays y en los elementos agrupadores y es que el back retorna errores y no se muestra debajo de los campos que eso lo hacia antes (primera feature que ya no se puede utilizar) segundo desarrollo quiero elementos que aparezcan y desaparezcan pudiendo cargarse en medio y post renderizado. se cambia la orientación de formulario a contenido por eventos que ocurre los ciclos de vida de angular se rompen porque ya no seria retro compatible con los primeros formularios y no dan tiempo de desarrollo. y así muchas cosas (autocomplete, carga demorada, atomización y compartimentación de configuraciones de componentes, tablas, rendering de otros componentes, etc)a que hemos llegado a tener un franquestein que ni esta terminado de definir y esta terminado de implementar ni termina de funcionar ni termina de hacer nada bien pero ellos se quedan con "hace muchas cosas y no funciona mal" y tu cabeza suena "es un desarrollo de usa semana y extra tiempo sacado a parches nunca va a funcionar bien de verdad". Por eso solo como dato importante es lo dinámico esta muy bien pero para casos pequeños como este o cosas que se tengan bien definidas y acotadas o para casos personales. Cosas buenas de elementos dinámicos mejor tiempo de desarrollo muy reutilizable etc. Cosas mala si no esta perfectamente definido nunca nunca nunca va a salir bien el desarrollo. PD: me ha encantado el video un saludo.

[@alexoliva9200]

Excelente ejercicio Héctor, actualmente desarrollo con React pero en su momento aprender esto era clave para entender como funciona la lógica de los formularios que tanto se suele encontrar uno en trabajos reales, gracias por compartir y enseñar estos temas! 🙌

[@christophergarcia8569]

Un chingo de gracias por tus videos ya no programo en net jaja pero tus cursos me ayudaron mucho a enterder la logica

[@YhonBarrios]

Excelente me gustan tus temas y ejemplos siempre enfocados en ejemplos más reales

[@rguere]

Hector no te preocupes por los nombres, los que nos interesa el contenido como tal, que no nos interesa lo importante es lo que estas enseñando, a mi me ha servido cada cosa que estas enseñando y si ya lo se lo repaso!! saludos!!!

[@macjmdc4130]

Perfeccion en todos sus videos! A ver si se puede uno del manejo de GIT o por lo menos como lo manejas Hector! excelente Contenido!!!🤟

[@gonzalogarcia8288]

Excelente Video Amigo Metalero. Amigo Metalero Héctor. Usted haga sus videos a su criterio y estilo. Es muy fácil criticar y solo hablar. Del dicho al hecho hay un gran trecho. Saludos desde Iztapalapa Amigo 🤟🤟👍

[@pablobonfante633]

Este año yo me tuve que enfrentar a este mismo problema. Y lo resolví de una manera muy parecida.

[@sergioacuna1772]

Con esto se puede hacer un arreglos con mensajes con archivos adjuntos, texto común, archivos adjuntos en común, formato en común, una web que ayude a secretaría a acelerar el envío de mensajes.

[@Elver_Galarga33]

Excelente video, cada día aprendo algo nuevo gracias a tus videos, saludos desde Colombia.

[@MEJA98]

Muy buen video, soy un backend developer pero no está de más saber este tipo de cosas

[@gpalmadev]

El mes pasado hice forms dinámicos con vue.js y me costó un montón tmb!

[@valdirmarquez9587]

Se aprende mucho.. Gracias..

[@luismonagas573]

Excelente mi pana.. Saludos desde Venezuela 28/09/2023

[@ccc85384]

Muy útil

[@sergiomontiel4559]

Hector, gracias por estos videos!!

[@DiegoHirschfeld]

Buenos días, Héctor. Soy un "mal" programador que aun utiliza jQuery pero cuando hago eso, no genero un form para no tener que utilizar el preventDefault. Solo utilizo el form cuando tengo muchos inputs dentro y, para no tener que tomar el valor de cada input, utilizo la función serialize. No sé si es una buena práctica pero es raro que tenga etiquetas form utilizando JavaScript. Muy buenos todos tus videos. Saludos desde Argentina

[@nicomendezdev]

Gracias Héctor, me encanta la forma en que explicas, muy buen video. Voy por el curso de SQL

[@natvgameplays6087]

Mi momento ha llegado!!! Es hora de pelearse con los formularios dinamicos

[@pauldev06]

Viendo este video porque ha llegado el día de enfrentarme con formularios dinámicos 🥲

[@solpropyme5360]

Apoyo esta excelente idea de ir por estos temas.

[@emermichacosta6]

Gracias Sensei por esto...

[@akucfh1867]

que buen video LCDSPM asi se explica js, gracias hector sos un idolo man

[@luismiguelmaradiagagaitan4286]

Buenísimo!.

[@rubenvilla1295]

Excelente video, gracias

[@cipolletti7]

Excelente! Muchas gracias, muy útil

[@rafaeljimenezrodriguez9311]

buen video, me das una idea de como funciona y manipula, Esto me servira para mis practicas y no repetir codigo en mis formularios. Muchas gracias

[@fabianquintero9944]

Excelente tu forma de explicar, gracias.

[@elar10]

Gracias mano

[@Deus-lo-Vuilt]

Luego de escuchar varios , No me importa dije , tengo que seguirlo ajajja que grande 😂

[@droid-jr9940]

buena clase... ahora intentare hacer mi propio map o un reduce ... pero puro codigo vanilla

[@julian888s]

Mis respetos!

[@JoséCarmenHernández-b4u]

Cómo decimos en México : Rifado tu video brother. Nuevo suscriptor

[@kf_11]

Exactamente, no todo son frameworks. Para dar mantenimiento a código legancy es mucho mas sencillo meter mano directamente en js, un framework o libreria puede romper lo demás.

[@rogerm412]

👐👐👐 gracias

[@hectorfragoso4840]

Tocayo Rapunzel... justo me tope con un desmadre así como ese. No uso framework alguno, es html con php (backend) y bootstrap.... te explico que pex . El usuario tiene que llenar un select que llamare opciones escogiendo un elemento de un select que le presento en un modal, agrego el elemento elegido al select opciones. necesito que ese select opciones pueda borrar, agregar elementos y que al presentar el select opciones se rellene con los valores de una base de datos. todo en forma dinamica, hermoso despapaye.

[@hdeleonnet]

Parte de esto puede servirte: kzbin.info/www/bejne/q5jMlJmegsl-l5Y

[@davevo3932]

Muy interesante, gracias amigo Héctor!

[@bryanportillo9772]

Gracias por tan buen video, una vez me toco hacer eso jaja, en efecto banda, llore sangre jajaja, pero se pudo solucionar xd

[@felipepino834]

Después de estar con react es raro ver html puro , No lo digo de presumido porque estoy aprendiendo,pero con esto me doy cuenta que hay que aprender mask html puro y js para entender lo que hago 😊

[@FernandoZamudioC]

estimado amigo seguidor de grupos POP como Cathedral... soy puro backend y estoy incursionando mas profundamente con FRONT llamese JavaScript, la verdad yo m quede en Vanilla JavaScript q aprendi hace 20 años atras... ahora bien me llamo mucho la antecion de tu codigo el cual ya conocia en un 75% salvo lo del name y crear JSON bonito es el tema de las comillas... ahora en mi cabeza tengo comillas simples, comillas dobles y comillas torcidas... recomiendas q siempre use comillas torcidas a partir de ahora ? digo para no concatenar usando el + en cada parte ? parece tonto pero fue lo q aprendi en este video !

[@hechados]

Me gusto, fine, fine ,fine

[@deybyariza7780]

Grande, Héctor

[@lucasruiz6176]

El rapunzel de C# jajajaja te banco fuerte. Hector un curso de Rust por favor !

[@victorgutierrez2206]

jajaja hermoso Rapunzel

[@davemour]

Es increíble todo lo que existe en vanilla y los años que tardamos en descubrirlo😂

[@mnlo]

Toma tu like

[@RicardoGarcíaFlores-e9d]

Excelente video Master de León!!! Más videos así :D

[@luissarmiento421]

Rapunzel pero con piedras en el riñón jajaja buen video por cierto

[@angrir3471]

Excelente video

[@dogemc_pro5386]

tranquilo amigo no hay que jusgar, ya que en reack o vue se hacen rapido. en paginas que son viejas necesitas hacerlo con javascript puro

[@neganuniverse5547]

Bro estaría col ahora mandarlos al back y guardarlos en la db

[@arturorodiguez9053]

Le di like, confirmo que no me costo nada ^^ , y esta notificación del banco?...

[@EzequielRizzo]

un dia mas sobreviviendo a js jajajaj, buen video bro!!

[@eliasolate9641]

estoy en esta misma situación pero el formulario esta en un wizard , por que a los doctores del hospital donde trabajo les da ansiedad scrollear

[@fabriqr2930]

Con Jquery es casi similar pero mas corto verdad? 😊

[@reliquia66]

yo estoy usando angular y formularios reactivos y fue un pedo validar el formulario formado por componentes aislados

[@changoviejo9575]

No valides dentro de los componentes, manda los datos con un @Output y eso lo validas en el formulario donde están los componentes.

[@reliquia66]

@@changoviejo9575 y cómo agregaría la leyenda de campo requerido debajo en tiempo real?

[@davidvelazquez7604]

Está Wapa la chava

[@another_developer]

Quedas calvo como Nicolas de Hola mundo hahahhah

[@IronMan0-h6j]

Rapunzel de C#

[@heroduty2466]

UFFF Esto en C# es mas simple de construirlo con una clase

[@danielzapata9099]

El Rapumzel se c# , 😂😂 que bueno

[@dibujahoy4443]

Hola cabezón, yo lo solucioné agregando el atributo name="email[]" en cada input de correo, esto te genera un array automáticamente al hacer submit y llega como array al backend

[@hdeleonnet]

Eso no lo soluciona para array de objetos, que es el caso del video

[@dibujahoy4443]

​@@hdeleonnet para el video está bien, en un caso real puedes usar el atributo name de esa manera y te ahorras un monton de chamba :*

[@247431]

Ahh pero es que yo eso lo hago con json schema form bien rápido jajaja

[@CristianMartinez-hm8cz]

Qué pluggin de wordpress manejas jajajajajajajaj xD

[@jeffersonledesmanaupa7808]

Contexto: No me importa. Buen video bro.

[@joseagrela2522]

le di like y me cobraron una multa

[@grumrm5369]

Calvo como NIcolas de HolaMundo xd

[@agustinzavalatotozintle5946]

😂😂😂

[@gris_opaco]

"No me importa.."

[@vulcanobyte]

Ahora sos JSlover?

[@angelnavarro3327]

Yo me atoro con Angular y lo hago mejor asi jajaja oops 😂

[@guillermocalfuqueo6338]

al final puro js.... 😥😥😥😥😥😥😥😥

[@hdeleonnet]

Sigue C#

[@GalurkYT]

paquillo esa no es tu familia...

[@aiitoor10]

Me da miedo

[@robotpolacosoymatrix.9106]

Este parece salido de la mismísima deep web.🤣