Generar input dinámicamente con jQuery PHP y MySQL

Generar input dinámicamente con jQuery PHP y MySQL
Descargar
Download is available until [expire_date]
  • Versión
  • Descargar 3606
  • Tamaño del archivo 197 KB
  • Recuento de archivos 1
  • Fecha de creación 13 agosto, 2018
  • Última actualización 19 marzo, 2019

Generar input dinámicamente con jQuery PHP y MySQL

Generar input dinámicamente con jQuery PHP y MySQL. Empezaremos esta entrada comentando acerca del lenguaje jQuery que vendría ser una variante del famoso lenguaje JavaScript. Sin duda, es una de las mejores librerías existentes en el mercado para dinamizar una página web.

Por lo tanto, en esta oportunidad veremos cómo generar y eliminar inputs HTML de forma dinámica usando casillas de verificación.

El ejemplo que propondremos en este artículo es muy usado en la mayoría de sistemas web. Sin embargo, les mostrare todos los detalles para su correcto funcionamiento.

Generar input dinámicamente con jQuery PHP y MySQL

Ahora veremos una serie de indicaciones acerca del uso, estructura y como funciona este sistema.

¿Qué recursos necesito para que este ejemplo funcione correctamente?

Básicamente necesita un servidor web para que el sistema corra sin problemas. A continuación detallare una lista de recursos necesarios.

  • Servidor web
  • Lenguaje PHP
  • jQuery
  • HTML5
  • Librerías BootStrap
  • Base de datos MySQL

¿Cómo funciona el sistema?

Primeramente detallaremos los elementos que se ha usado.

  • Casilla de verificación
  • Input
  • Botones

EL sistema consta de un formulario HTML, casilla de verificación y/o input. Por lo tanto, todos actúan simultáneamente para lograr el objetivo. Al presionar el botón "Agregar Mas", de manera automática generara una fila con varios ítems y si volvemos a presionar volverá a generar mas ítems.

Ahora para borrar una fila o varias filas solo tenemos que activar la casilla en las filas que deseamos borrar y a continuación presionar el botón "borrar campos"

Si deseamos guardar en MySQL las filas que hemos generado tenemos que llenar contenido en los input generados y posteriormente presionar el botón "Guardar Ahora". Luego puedes verificar en la base de datos que los registros han sido guardados.

¿Cómo instalar el sistema?

La instalación es muy sencilla, solo tenemos que tener una base de datos existente o crear una nueva y tenemos que verificar las siguientes líneas.

Solo modificaremos la línea 3 del fichero "index.php" y cambiar con sus credenciales que su servidor les ha dado. Aquí pondré un ejemplo.

 $conn = mysqli_connect("localhost","root","root", "php_dinamico");

¿Que hace el sistema?

  • Carga y genera cuadro o cuadros de texto dinámico.
  • Quita el elemento input con la funcion "BorrarRegistro".
  • Lee e inserta los datos en la base de datos usando Submit.

Generar input dinámicamente con jQuery PHP y MySQL
Generar input dinámicamente con jQuery PHP y MySQL

Botón volver arriba