Cómo crear CAMPOS de formulario DINAMICOS con

Подписаться 7 тыс.

Просмотров 11 тыс.

50% 1

#Tutorial de Javascript para el manejo de #DOM creando campos de formularios de manera dinámica para insertar varios registros en el #MySQL en un sólo envío.
Extracto editado de una clase en vivo, temas explicados:
00:00 Presentación del tema
01:03 Estructura HTML
02:49 Creación de INPUTs dinámicos
06:55 Creación de un Micro FRAMEWORK para el manejo del DOM en JS
30:38 Formato CSS mínimo para el form
33:04 Problema al recibir los datos por POST
35:46 Creación de la base de datos
36:52 Recibir bien los campos por POST
38:41 Conexión al MySQL e Inserción de valores
Archivo con el ejemplo: bit.ly/3zEqzDz
Si tenés dudas (no solo de este video), podés evacuarlas en los comentarios o participar en las tutorías de programación en vivo, en bit.ly/PadawansTwitch
Buscame sino en tu red social preferida: bit.ly/Pada1sTrainer

Опубликовано:

5 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 52

@wilintoncastano3041 Год назад

Muchas gracias por el aporte, un un crack 😎👍

@cesarcolmenarez5935 Год назад

este tipo es un Dios!!!!

@MiauMichigan Год назад

Mil gracias!!!! Estaba trabadísima con lo de eliminar y tu video me salvó

@PadawansTrainer Год назад

Me alegra haberte podido ayudar Peaches peaches peaches. Saludos y gracias por tu comentario!

@joaquinblanco Год назад

Hola genial esta tu contenido ahora vi que tenes un curso de bases de datos gracias y like

@vellenger Год назад

Exelente, justo lo que estaba buscando, Gracias :D

@PadawansTrainer Год назад

Y mi tutorial te estaba buscando a vos, finalmente se encontraron 🤭 Gracias por tu mensaje, Vallenger y me alegra haberte podido ayudar. Saludos!

@fernandocoboj5385 10 месяцев назад

¡Realmente grandioso!!!

@PadawansTrainer 10 месяцев назад

Gracias Fernando! Abrazo grande!

@RubenGZ Год назад

Videos como estos carece en RU-vid por lo menos en español y bien explicado....

@PadawansTrainer Год назад

Muchísimas gracias por tu comentario y apoyo, Rubén

@suyenfs Год назад

Hola German me encanto tu video muchas gracias por el aporte. Una consulta como podria ser en un formulario que tenga un input de "cantidad de participantes" y que al colocar un numero se desplieguen otros campos con la misma cantidad?

@juangroverpaxichuquichambi4577 Год назад

😅😅 que envidia el conocimiento que tiene, mi meta es llegar a hcer lo que hace sin dudar.

@PadawansTrainer Год назад

Jajajaj Juan. primero muchas gracias por tu comentario. Segundo (no, basta del chiste de Francia, mon Dieu), no creas que sé tanto... solo sé de lo que hablo, me sacás de eso y soy como un pez fuera del agua. Mi consejo, seguí practicando y aprendiendo y vas a ver que en el corto/mediano plazo, vas a saber incluso más de lo que muestro en mis videos. Saludos!

@user-qd4jm2tm3s 11 месяцев назад

Tremendo video amigo, me ayudo mucho, solo quisiera nos apoyaras para ver como modificar los estilos por medio del micro framework DOM y trabajar quizás con Bootstrap para asignarles las clases.

@facus3500 Год назад

Exelente video!!! Muchas gracias... Me gustaria mucho que muestres como personalizar los inputs con css.

@PadawansTrainer Год назад

Claro que sí! Aprovecho la excusa de tu mensaje para la autopromoción descarada de los dos que ya tengo: - formatear checkbox/radio: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-B13ca2_z2GY.html - formatear los input de tipo file: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-JnF5egnVrPQ.html Saludos y gracias por el mensaje, Facundo!

@djvarela 2 года назад

Un groso!

@ProduccionesNanos 2 месяца назад

Maestro, primero que nada, ¡Excelentísimo video! (Como todos los que realiza). Una consulta existencial (de las cosas raras de JavaScript), que quizás puedas aclararme. ¿Por qué al aplicar "onlick" dentro de las propiedades de los elementos al crearlos, este atributo no figura en el html? -> const borrar = DOMC.create('a', {href: 'javascript:void(0)', innerHTML:'x', onclick: function() { DOMC.remove(detail)}}); Sin embargo, si asignamos una funcion en onclick directamente desde html, esta se muestra en Elementos al inspeccionar con DevTools. Pero, si realizamos una busqueda de las etiquetas 'a', dentro de la lista del nodo, se muestra la propiedad onclick, con la función del JavaScript ( { DOMC.remove(detail)} ). Desde ya muchas gracias y un abrazo desde Uruguay.

@josejorgegc Год назад

resuelto mi problema!!! Muchas gracias por la info, todo super explicado, simplificado y muy ameno el video. Saludos desde Cuba. Ah, Python es un poquito mas inteligente con los arrays en los forms 🤣

@PadawansTrainer Год назад

Abrazo José, gracias por tus palabras. Prometo algún día darle una oportunidad a Python en mi vida, por ahora es una tecnología no explorada por mí jajajaj. Saludos!

@casatelchac5986 Год назад

Amigo esta buenisimo el programa, la forma de irlo piliendo le da un plus de poca ma.... tendras algún correo para futuras consultas ? lo que viy a hacer es que cuando el usuario teclee un importe (importe1) me habra automaticamente un elemento y si el importe del nuevo elemento es menor a importe 1, me habrá en automatico un nuevo elemento y así sucesivamente hats aque el importe 1 sea igual a la suma de los importes creados... lo termino y lo commparto contigo para tus criticas, claro si puedes, gracias....

@AdrianaRamirez-vl2mx Год назад

@German Rodriguez Hola German, gracias por tu video, m ayudo mucho. Tengo una consulta: Utilice lo que hiciste pero lo adapte a lo que necesitaba, utilice un select, todo funciona bien pero no se hacer lo siguiente, si las options del select las cargo con un foreach que recorre un array, como puedo colocar el foreach en el js? xfa se puede?. En la primera parte que es la q tengo en el html ya lo hago y funciona. Ahora necesito replicar esa parte del foreach con el js pero no se la sintaxis. Xfa si puedes ayudarme, gracias

@pablofernandopesantezruiz5836 6 месяцев назад

Como construyes el select?

@jhancarlocamacuariaquino6280 Год назад

hola buen día amigo. Genial el video, solo tengo una consulta en caso de un select solo cambiaría el type?

@PadawansTrainer Год назад

Hola Jhan, para hacer un select no se cambia el type (porque no existe un input de tipo select). Lo que necesitás hacer es crear un elemento select y definir los options que va a usar adentro (ya sea por innerHTML o por sus respectivos createElement/appendChild) Saludos!

@AdrianaRamirez-vl2mx Год назад

@@PadawansTrainer Si las options del select las cargo con un foreach que recorre un array, como puedo colocar el foreach? xfa se puede?

@williannpy Год назад

tengo un problema con esto pero a la hora de editar campos de formularios dinamicos generados con javascript guardados en la base de datos, a veces quiero agregar mas campos en donde se edita pero no puedo hacerlo;( si alguien sabe porfa me avisa :,)

@sapbusinessone7561 Год назад

Hola profe, una pregunta. Quiero insertar la hora actual y fecha actual dentro de un input y solo he encontrado videos que hacen con la funcion innerHTML pero, eso solo reemplaza a los p,h1 pero no inserta dentro de un input, yo quiero capturar la hora y fecha actual dentro de unas etiquetas input para capturar los datos en mi formulario

@PadawansTrainer Год назад

Hola, en los input el atributo para indicar el contenido que van a tener es el value. input.value = "valor del input" ; O podés asignarlo con la función setAttribute input.setAttribute( "value", "valor del input" ) ; La propiedad innerHTML solo existe en las etiquetas que tienen un par de cierre (, , , etc) todas las etiquetas que se cierran a si mismas (es decir que no tienen un par de cierre) no tienen esta propiedad porque representa el html interno (inner html) es decir lo que va anidado adentro de la etiqueta. Quedan afuera input, area, img, hr, br, col, meta, source y demás Saludos!

@LALOOS71 5 месяцев назад

Genial el tutorial te hago una consulta queria saber como hacer formularios dinamicos para recaudar datos con laravel, poder elegir preguntas con sus respuestas o con radiobutton, permitir agregar preguntas e input de respuestas

@PadawansTrainer 5 месяцев назад

Hola Lalo, no uso Laravel así que no sabría cómo ayudarte con eso. Abrazo y mil disculpas!

@LALOOS71 5 месяцев назад

Gracias igual, por tus tutoriales @@PadawansTrainer

@moisesperaza3830 Год назад

Me encanto mucho tu vídeo, Como puedo contactarte

@juanpizzo Год назад

Hola tengo una duda, como se puede poner para que los campos dinamicos que creas con JS sean para completar obligatoriamente?, entiendo que con required, pero solo funciono para la parte estática no para la parte "dinámica" del formulario. gracias

@PadawansTrainer Год назад

Hola Juan, para javascript el required es un atributo booleano. objetoInput.required = true; Con eso deberías hacerlo obligatorio desde HTML. Saludos!

@juanpizzo Год назад

@@PadawansTrainer muchísimas gracias me super funciono, sos lo más solo quiero que lo sepas

@guillermogomez9969 Год назад

Hola German, tremendo video, gracias por compartir tus conocimientos. Necesito de tu ayuda, estoy intentado hacer algo parecido, cree un formulario que en definitiva es una encuesta, lo dinámico es que cada pregunta varía según una variable (valga la redundancia) que es seleccionada previo al ingresar al formulario, los input no los creo, más bien los voy agregando a una plantilla que después se lo paso al .html('plantilla') de un , hasta ahí perfecto, el problema es cuando paso esos datos a php a través de ajax con serialize, porque desconozco el atributo "name" y la cantidad de items que me llega para insertarlo en la base de datos y hasta ahí llegue. Las preguntas las traigo con otra petición ajax de la base de datos en donde después tengo que guardar las respuestas. Desde ya muchas gracias.

@THENEOZONAMETRO 2 года назад

¡Tremendo video! Necesito hacer algo así como esto, pero en lugar de agregar campos vacios, necesito que el item que yo selecciones en mi select, se vaya agregando su contenido, ejemplo, tengo el nombre de un médico, voy a agregar los servicios que presta, selecciono consulta, agrego, selecciono procedimientos quirúrgicos, agrego, etc. ¿tienes algún video similar con lo que requiero? entiendo que es la misma dinámica, pero te agradezco si tienes algo más similiar a lo que menciono, una vez más, mil gracias.

@PadawansTrainer 2 года назад

Hola Diego, ¿pudiste resolverlo? Si no pudiste contame un poco más qué necesitarías hacer a ver si te puedo tirar una punta (porque no, no tengo un video para lo que me pregutas)

@THENEOZONAMETRO 2 года назад

@@PadawansTrainer Hola, aún no he podido, te agradecería si me puedes apoyar, he aprendido más contigo en tus videos que en la uni, te agradezco.

@THENEOZONAMETRO 2 года назад

@@PadawansTrainer Resulta que, tengo un formulario en el que debo escoger una empresa, uno o más médicos, ahí ya comienza lo que requiero, porque debo agregar varios médicos, pero estos ya los tengo precargados en la lista dessplegable, así que no requiero escribirlos, así que debo seleccionar uno e irlo agregando al formulario, ya que un contrato aplica para uno a varios médicos, luego, voy a agregar los servicios que estos prestan, lo cual es la misma dinámica, una lista desplegable con una serie de servicios que ya tengo en una base de datos, solo debo ir seleccionando, y agregando uno a uno, al final, tengo una ficha técnica donde me muestra una empresa con los médicos adscritos y los servicios que van a prestar, mil gracias por tu apoyo, quedo pendiente por si requieres info adicional, un abrazo.

@jhonathanramirez7173 Год назад

@@THENEOZONAMETRO Hola, pudiste realizar ese ejercicio ?

@THENEOZONAMETRO Год назад

@@jhonathanramirez7173 No amigo, nada, estoy optando por el método multiselect

@jesusgregoriosola5871 7 месяцев назад

Mi estimado Germán, eres un diablo en programación y sólo deseo hacerte una sugerencia… apiádate de nosotros y habla un poco más despacio para seguirte, al tiempo que te ruego que explicases también un poquito más. Gracias y saludos ¡Picha!

@PadawansTrainer 7 месяцев назад

Hola Jesus, gracias por el mensaje. No es por mala voluntad que pase tan rápido el video, es que si los hago más pausados o lentos, ven que dura más de 10 minutos y no los ve ni el loro :( Quiero que aprendan, pero también que tengan ganas de darle play a los contenidos jajaja Cualquier duda que te quede de un video, dejalo en los comentarios, en el peor de los casos si estoy sepultado de trabajo como estos días me demoro un toque en las respuestas, pero suelo responder (casi) todo lo que me llega. Abrazo!

@julietareimundo2878 7 месяцев назад

Por qué explicaba tan bien ? Jajaj

@PadawansTrainer 7 месяцев назад

Te confieso un secreto? No explico bien, esto es lo único que sé hacer jjajaja Era todo un fraude. Gracias por tu comentario y apoyo, saludos!

@ITSUPPORTDEU 8 месяцев назад

🚀🚀Saludos German Rodriguez @PadawansTrainer, me gusto mucho tu video te queria preguntar hay un error en el codigo que no he podido solucionar. Cuando le das click a cargar usuario con el formulario vacio te crea un registro en blanco en la DB; habra forma de solucionarlo?

@PadawansTrainer 8 месяцев назад

Hola IT, perdón por la mega demora Tenés 3 lugares distintos donde podés poner esa validación: 1) Agregarle el atributo required de html a los campos que son obligatorios cuando los creás con Javascript. Para JS el required es un booleano: input.required = true 2) No hacer nada desde PHP si te llega un campo vacío, eso lo podés verificar en PHP haciendo tus acciones si la función empty da falso: if( ! empty( $_POST['campo'] ) ){ /* tus acciones */ } 3) Haciendo en la base de datos que los campos mínimos obligatorios (toda entidad tiene campos mínimos para funcionar) sean NOT NULL en la definición de la tabla Saludos!