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.
¿Qué hace el sistema Inputs dinámicos?
- Carga y genera cuadro o cuadros de texto dinámico.
- Quita el elemento input con la función «
BorrarRegistro«. - Lee e inserta los datos en la base de datos usando
Submit.
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.
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.
