Agregar y eliminar campos con JQuery Ajax: Ejercicio completo

Agregar y eliminar campos con jQuery Ajax. En este tutorial tocaremos el tema de como insertar dinámicamente campos tipo input y/o eliminar campos HTML al presionar un botón. Por lo tanto, para lograr nuestro objetivo usaremos JQuery Ajax con PHP MySQL para almacenar la información de los inputs.

Este modelo de sistemas es usado por ejemplo para sistemas de facturación, agregar más de una imagen, cargar más de un archivo, entre otros ejemplos.

Agregar y eliminar campos con JQuery Ajax

A continuación, describiremos una serie de preguntas y respuestas acerca del sistema mencionado, como también su estructura de ficheros.

¿Cómo funciona el sistema?

• El funcionamiento se basa en incrementar más de un input al mismo tiempo de manera dinámica y a la vez esa información almacenarla en una base de datos.
• Al cargar la página mostrara un input disponible pero el usuario puede añadir la cantidad de input que desee presionando el botón «agregar más«.
• Para lograr tal objetivo necesitamos del lenguaje jQuery y para procesar la información de lo input usaremos AJAX.

Mas información

El usuario final del sistema puede agregar varios campos al mismo tiempo. Los campos se insertarán con la actualización para tal acción usaremos la llamada de función Ajax. Sin embargo, el usuario puede agregar más campos haciendo clic en «agregar campos» y luego aparecerá un cuadro de texto en la página web.

Si deseamos eliminar, usaremos el botón eliminar que se mostrara con una (X). Estas características son muy útiles en aplicaciones Web.

Agregar y eliminar campos con jQuery: Partes del sistema

La base de datos: Creación de una tabla

Para que este ejemplo funcione necesita una base de datos llamado «agregar_campos» y su respectiva tabla con el nombre «tbl_nombre» en donde almacenara los registros que declaremos en el formulario con input dinámicos.

CREATE TABLE `tbl_nombre` (
  `id` int(11) NOT NULL,
  `nombre` varchar(250) NOT NULL,
  `fecha` datetime DEFAULT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8;


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


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

Fichero index.php

Este fichero será el principal porque aquí mostraremos un formulario con un solo input. Sin embargo, dejaremos un botón con el texto «Agregar Más» el cual nos permitirá generar nuevos inputs dinámicamente y también nos dará la posibilidad de almacenarlo en la base de datos usando AJAX.

<div class="container">
<h3 class="mt-5"><a href="https://www.baulphp.com/agregar-y-eliminar-campos-con-jquery-ajax">Agregar y eliminar campos con JQuery Ajax</a></h3>
<hr>
<div class="row">
<div class="col-12 col-md-12"> 
<!-- Contenido -->
<div class="container">
<br />
<div class="form-group">
<form name="add_name" id="add_name">
<div class="table-responsive">
<table class="table table-bordered" id="dynamic_field">
<tr>
<td><input type="text" name="name[]" placeholder="Ingrese su nombre" class="form-control name_list" /></td>
<td><button type="button" name="add" id="add" class="btn btn-success">Agregar Más</button></td>
</tr>
</table>
<input type="button" name="submit" id="submit" class="btn btn-info" value="Enviar Información" />
</div>
</form>
</div>
</div>

Declaración del JavaScript

Aquí, mostraremos unas líneas de código JavaScript que serán capas de poder almacenar en la base de datos usando AJAX y también mediante un archivo PHP.

$(document).ready(function(){
var i=1;
$('#add').click(function(){
i++;
$('#dynamic_field').append('<tr id="row'+i+'"><td><input type="text" name="name[]" placeholder="Ingrese su nombre" class="form-control name_list" /></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');
});

$(document).on('click', '.btn_remove', function(){
var button_id = $(this).attr("id"); 
$('#row'+button_id+'').remove();
});

$('#submit').click(function(){      
$.ajax({
    url:"nombre.php",
    method:"POST",
    data:$('#add_name').serialize(),
    success:function(data)
    {
        alert(data);
        $('#add_name')[0].reset();
    }
});
});

});

Archivo nombre.php

Este fichero será usado por el AJAX para procesar los datos del formulario y almacenarlo en la base de datos. Por lo tanto, en este fichero contendrá los datos de conexión con el servidor MySQL y la cláusula de inserción llamado «insert into«.

Además, usaremos el ciclo FOR para contar la cantidad de input dinámicos creados y almacenarlos en la tabla de destino.

<?php
// Realizamos la conexion con el servidor MySQL
$connect = mysqli_connect("localhost", "root", "", "agregar_campos");
// Contamos la cantidad de input generado por el usuario
$number = count($_POST["name"]);
if($number > 1)
{
for($i=0; $i<$number; $i++)
{
if(trim($_POST["name"][$i]!= ''))
{
    // Insertamos la informacion enviada por el formulario
    $sql = "INSERT INTO tbl_nombre(nombre, fecha) VALUES('".mysqli_real_escape_string($connect, $_POST["name"][$i])."',now())";
    mysqli_query($connect, $sql);
}
}
    // Si todo es correcto, imprimimos informacion ingresada
echo "Información ingresada";
}
else
{
echo "Por favor ingrese su nombre";
}
?>

CONCLUSIÓN: Agregar y eliminar campos con JQuery

• Este script es muy útil y debe estar presente en la mayoría de sistemas online y/o páginas web para darle el dinamismo que necesitan.
• Otra ventaja de este método de programación es no recargar nuestro proyecto a la hora de insertar un registro a la base de datos y con esto no saturamos nuestro servidor.
• Su uso es muy recomendado y si observamos con detalle el procedimiento y la implementación no es tan complicado.

Descarga del sistema

A continuación, les dejare el sistema para que puedan descargarlo y probarlo en sus proyectos web que tengan en mente. Desearles que les sea de mucha ayuda.

Añadir y eliminar input usando jQuery PHP

1 archivo(s) 229.35 KB

Descargar