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 😀

Anuncios
  • 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?

  • Edu Rodriguez

    Pdrías actualizar el link para la descarga ?? sale error para descargar

  • Marii-Criss AD

    Como podria hacerle si necesito que dos id´s aparezcan en un mismo modal???

  • Steven Orrego

    como podria hacer con el upgrade

    • Raul Goodman

      haz una funcion php la cual llamas debajo de la tabla y la funcion recogera los $_POST[] cuando le des guardar, para ello haz de tipo submit el boton

  • Bill’s Alanya

    una consulta que haria para cargar los valores en combobox o select por fa