Enviar valores a una ventana modal usando jQuery

Este tutorial te mostraremos  cómo enviar valores a una ventana modal usando jQuery. Esto es más aplicable si deseas usar jQuery cuando edites los datos de una tabla MySQL usando Bootstrap Modal.


Creando nuestra base de datos

El primer paso es crear nuestra base de datos.
1. Abre phpMyAdmin.
2. Haga clic en bases de datos, cree una base de datos y asignarle el nombre que desees, para este tutorial nosotros la hemos llamado “test_pass_modal”, pero tu puedes nombrarla como desees .
3. Después de crear una base de datos, haz clic en la pestaña importar, luego selecciona el archivo llamado “test_pass_modal”, dicho archivo se encuentra en el directorio root de nuestro tutorial.

Ver la imagen a continuación para obtener instrucciones detalladas sobre la importación de tablas para nuestra base de datos.

Creando nuestra conexión

A continuación, crearemos nuestra conexión a la base de datos. Esto nos servira para conectarnos a nuestra base de datos y de esa manera poder listar los registros que se encuentren en la tabla. Hemos nombrado dicho archivo: conn.php

Listando los registros

 Para listar los registros almancenados en la tabla “user“, vamos a crear el archivo index.php

Creando nuestro Modal

Lo siguiente es crear nuestro formulario que recibirá los datos en la ventana modal. Llamamos a esto como “modal.php“.

Creando nuestro script

El último paso es crear nuestro script jQuery para pasarle los valores a nuestra ventana modal. Llamamos a esto como “custom.js“.

Aquí termina este tutorial. Si tienes algún comentario o pregunta, no dudes en hacernos saber dejando un comentario a continuación.   Happy Coding 😀



  • Jorge Rodas

    Muy bueno, felicitaciones. una consulta: veo que los valores se pasan a los input que estan en el modal, pero si fuera un select que esta en el modal, ¿Como se hace para que el valor aparezca en el select?