JQuery biblioteca de JavaScript

▷ Inputs dinámicos usando jQuery y PHP

Inputs dinámicos usando jQuery y PHP. Sin duda, la fusión de los lenguajes PHP y jQuery combinado con una base de datos MySQL hacen que un trabajo sea realmente eficaz. En este artículo nos enfocaremos en una de las opciones que todo sistema web debe tener, la cual es agregar o eliminar Input de forma dinámica usando jQuery.

Sin embargo, este sistema puede crear varios campos de texto donde el usuario puede insertar información y posteriormente almacenarlo en la base de datos. Un código muy intuitivo y dinámico para nuestros proyectos.

Inputs dinámicos usando jQuery y PHP

A continuación, mostraremos una serie de pasos de cómo implementar dicho código.

Crear input dinamicos con jQuery
Crear input dinamicos con jQuery

¿Qué hace el sistema Inputs dinámicos?

Pasos para la implementación del código

En este apartado detallaremos todos los pormenores para el correcto funcionamiento del ejemplo.

1. Estructura y datos de la base de datos

Recordemos que la siguiente instrucción solo se ejecutara en MySQL. Por lo tanto, para poder instalarlo usaremos el PHPMyAdmin.

CREATE TABLE IF NOT EXISTS `productos` (
`id` int(11) NOT NULL,
  `ProNombre` varchar(250) DEFAULT NULL,
  `ProPrecio` varchar(100) DEFAULT NULL,
  `ProCantidad` int(11) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

ALTER TABLE `productos`
 ADD PRIMARY KEY (`id`);

ALTER TABLE `productos`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;

2. Contenido dinámico HTML

Código HTML que será anexado desde jQuery para generar múltiples registros similares. A continuación, podemos guardar este código en un fichero con nombre «InputDinamico.php«.

<div class="lista-producto float-clear" style="clear:both;">
 <ul class="list-group">
   <li class="list-group-item">
<div class="float-left"><input type="checkbox" name="item_index[]" /></div>
<div class="float-left"><input class="form-control" type="text" name="pro_nombre[]"/></div>
<div class="float-left"><input class="form-control" type="text" name="pro_precio[]" style="width:110px;" /></div>
<div class="float-left"><input class="form-control" type="text" name="pro_cantidad[]" style="width:110px;"/></div>
    </li>
 </ul> 
</div>

3. Librería externas

Usaremos librerías externas que son necesarias implementar ya sea por el requerimiento del lenguaje jQuery y/o para el manejo de la estética de  nuestro sistema.

<!-- Bootstrap core CSS -->
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="assets/sticky-footer-navbar.css" rel="stylesheet">
<link href="assets/style.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-2.1.1.js"></SCRIPT>

4. Cargar y anexar cuadro de texto dinámico

Si presionamos en botón «Agregar Mas«. Los inputs se añadirá dinámicamente mediante jQuery Append() y Load(). El código y la función son los siguientes.

function AgregarMas() {
    $("<div>").load("InputDinamico.php", function() {
    $("#productos").append($(this).html());
   });  
}

5. Eliminar filas del formulario

Este código tiene una particularidad frente a los demás códigos. Por lo tanto, en cada registro generado de manera dinámica también se agregara una casilla de verificación que usaremos para seleccionar las filas que deseamos eliminar.

Una vez marcado las casillas que deseamos eliminar,  solo tendríamos que presionar el botón «Borrar Campos» y esos elementos serán eliminados de manera automática del formulario.

Al presionar el botón desencadenara y ejecutara la función llamada «BorrarRegistro» eliminando los campos coincidentes.

function BorrarRegistro() {
    $('div.lista-producto').each(function(index, item){
        jQuery(':checkbox', this).each(function () {
            if ($(this).is(':checked')) {
                $(item).remove();
            }
        });
    });
}

6. Leer y almacenar los registros generados dinámicamente.

Si bien, la información tiene que ser almacenada en una base de datos. Sin embargo, tenemos que apoyarnos en un CICLO FOR para poder almacenar varios registros de manera simultánea. Ya nosotros conocemos el sistema MySQL CRUD. Es algo similar y a continuación veremos un extracto del código.

$query = "INSERT INTO productos (ProNombre,ProPrecio,ProCantidad) VALUES ";
$queryValue = "";
for($i=0;$i<$contador;$i++) {
    if(!empty($_POST["pro_nombre"][$i]) || !empty($_POST["pro_precio"][$i]) || !empty($_POST["pro_cantidad"][$i])) {
        $ProContador++;
        if($queryValue!="") {
            $queryValue .= ",";
        }
        $queryValue .= "('" . $_POST["pro_nombre"][$i] . "', '" . $_POST["pro_precio"][$i] . "', '" . $_POST["pro_cantidad"][$i] . "')";
    }
}
$sql = $query.$queryValue;

7. Salida del sistema en un navegador

La siguiente captura de pantalla nos da a conocer la primera fila del formulario que nos permitirá agregar más filas automáticamente utilizando jQuery Ajax.

Inputs dinámicos usando jQuery y PHP
Inputs dinámicos usando jQuery y PHP

CONCLUSIÓN

La instalación de este sistema en muy sencilla. Por lo tanto, no tendrán problemas a la hora de implementar en sus propios proyectos web. La curva de aprendizaje de este código es muy baja.

La utilización de este método para insertar registros a la base de datos está creciendo día tras día, los clientes hoy en día piden estos sistemas dinámicos con lo cual no satura el servidor web. Haciendo que la inserción de registros sea mucho más flexible.

DESCARGA

Ver Demo Descargar

Nestor Tapia

Bloggero, amante de la programación PHP, innovador y me fascina compartir información. Desde que conocí el entorno informatico y el internet me llamó la atención la programación, Por tal motivo he creado mi blog BAULPHP.COM para compartir mis experiencias con todos ustedes. ¡Gracias por leerme!.
Botón volver arriba