JavaScript Tutoriales y ejemplos

Agregar Eliminar campos HTML dinámicos con JQuery PHP

Sistema de formulario dinámico PHP Ajax y MySQL

En este tutorial, vamos a aprender a Agregar Eliminar campos HTML dinámicos mediante el plugin Jquery e insertar datos de campos HTML generados dinámicamente en la tabla Mysql mediante PHP con Ajax.

Aquí hemos utilizado el plugin repetidor Jquery para generar campos de entrada dinámicos con añadir más y eliminar botón en forma HTML. Cuando tenemos trabajo en mi proyecto, entonces queremos requerir generar HTML dinámico de 10 campos de entrada en mi formulario.

Agregar Eliminar campos HTML: Ventajas

  • Al momento de escribir código jquery para generar campos HTML dinámicos, la velocidad de nuestro sitio web ha subido.
  • El proceso es vía jQuery y no solicita refrescar nuestra página web y eso conlleva a optimizar el consumo de nuestro servidor.
  • Es muy rápido a la hora de mostrar o eliminar campos lo que nos ahorra tiempo de ejecución
  • Genera campos dinámicos en nuestros formularios
Agregar Eliminar campos HTML dinámicos con JQuery PHP
Agregar Eliminar campos HTML dinámicos con JQuery PHP

¿Cómo funciona el script Agregar Eliminar campos HTML?

Si queremos hacer funcionalidad como generar campos de entrada HTML dinámicos en nuestro formulario, entonces mediante el uso de este plugin podemos hacer esta característica escribiendo código muy corto.

Podemos agregar o eliminar campos de entrada generados dinámicamente muy fácilmente. Después de esto queremos procesar esos campos múltiples e insertar en la tabla mysql.

El script trabaja haciendo uso de Ajax con PHP y MySQL como motor de almacenamiento.

Estructura del script: Agregar Eliminar campos HTML

A continuación, vamos a detallar los componentes del presente ejemplo

A) Fichero index.php

Este es el principal archivo que mostrara el ejemplo de replicador de campos. Además, hemos usado la librería BootStrap 5 para la interfaz gráfica del script.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Agregar Eliminar campos HTML dinámicos con JQuery PHP</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css" integrity="sha384-DhY6onE6f3zzKbjUPRc2hOzGAdEf4/Dz+WJwBvEYL/lkkIsI3ihufq9hk9K4lVoK" crossorigin="anonymous"> 
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="js/duplicador.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<br />
<h3 align="center">Agregar Eliminar campos HTML dinámicos con JQuery PHP</h3>
<br />
<div style="width:100%; max-width: 600px; margin:0 auto;">


<div class="card">
<div class="card-header">
Agregar detalles de habilidades de programación
</div>
<div class="card-body">
<span id="success_result"></span>
<form method="post" id="repeater_form">
<div class="mb-3">
<label class="form-label">Ingrese nombre del programador</label>
<input type="text" name="nombre" id="nombre" class="form-control" required />
</div>
<hr>
<div id="repeater">
<div class="row">
<div class="col-md-9">
</div>
<div class="col-md-3">
<button type="button" class="btn btn-primary repeater-add-btn"> Agregar </button>
</div>
</div>
<div class="clearfix"></div>
<div class="items" data-group="programming_languages">
<div class="item-content">
<div class="form-group">
<div class="row">
<div class="col-md-9">
<label class="form-label"></label>
<select required data-skip-name="true" data-name="lenguaje[]" class="form-select">
<option value="">Seleccionar habilidad del programador</option>
<option value="PHP">PHP</option>
<option value="Oracle">Oracle</option>
<option value="JQuery">JQuery</option>
<option value="Vanilla JS">Vanilla JS</option>
<option value="AngularJS">AngularJS</option>
<option value="CoffeeScript">CoffeeScript</option>
<option value="Laravel">Laravel</option>
<option value="Bootstrap 5">Bootstrap 5</option>
</select>
</div>
<div class="col-md-3" style="margin-top:24px;" >
<button onclick="$(this).parents('.items').remove()" class="remove-btn btn btn-danger">Eliminar</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="form-group" align="center">
<br /><br />
<button type="submit" name="insertar" class="btn btn-success">Registrar programador</button>
</div>
</form>
</div>
</div>


</div>
</div>

<script>
$(document).ready(function(){

$('#repeater').createRepeater();

$('#repeater_form').on('submit', function(event){
event.preventDefault();
$.ajax({
url:"agregar.php",
method:"POST",
data:$(this).serialize(),
success:function(data)
{
$('#repeater_form')[0].reset();
$('#repeater').createRepeater();
$('#success_result').html(data);
}
})
});

});

</script>
</body>
</html>

B) Archivo agregar.php

Haciendo uso del Ajax, este fichero es llamado para poder almacenar los registros del formulario dinámico. Por lo tanto, posee las variables y condicionales para almacenar la información en MySQL.

<?php

//archivo agregar.php

$db = new PDO("mysql:host=localhost;dbname=db_programas", "root", "");

if(isset($_POST["lenguaje"])){$lenguaje=$_POST["lenguaje"];}else{$lenguaje="-";}
if(isset($_POST["nombre"]))
{
$habilidad = implode(", ", $lenguaje);

$data = array(
':nombre_programador' => $_POST["nombre"],
':lenguaje_programador' => $habilidad
);

$query = "
INSERT INTO tbl_programadores 
(nombre_programador, lenguaje_programador) 
VALUES (:nombre_programador, :lenguaje_programador)
";

$statement = $db->prepare($query);

if($statement->execute($data))
{
echo '
<div class="alert alert-success">
Registro guardado correctamente.
</div>
';
}
}

?>

C) Contenido de la Base de datos

Para establecer una conexión con MySQL usaremos PDO. La base de datos le daremos un nombre “db_programas” y la tabla se llamará tbl_programadores. Sin embargo, pueden cambiar los nombres de su preferencia.

CREATE TABLE `tbl_programadores` (
`pro_id` int(11) NOT NULL,
`nombre_programador` varchar(200) COLLATE utf8mb4_unicode_ci NOT NULL,
`lenguaje_programador` text COLLATE utf8mb4_unicode_ci NOT NULL,
`fecha_ingreso` timestamp NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp()
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

--
-- Volcado de datos para la tabla `tbl_programadores`
--

INSERT INTO `tbl_programadores` (`pro_id`, `nombre_programador`, `lenguaje_programador`, `fecha_ingreso`) VALUES
(1, 'Jhon Connor', 'PHP, JQuery', '2020-12-26 22:47:24'),
(2, 'John Smith', 'PHP, Mysql', '2020-12-26 22:47:24'),
(3, 'Juan Carrillo', 'Vanilla JS, CoffeeScript, Oracle', '2020-12-26 23:09:21'),
(4, 'Fabiola Marquez', 'PHP, Bootstrap 5, AngularJS', '2020-12-26 23:20:05'),
(5, 'jju', 'Oracle', '2020-12-26 23:28:49');

--
-- Índices para tablas volcadas
--

--
-- Indices de la tabla `tbl_programadores`
--
ALTER TABLE `tbl_programadores`
ADD PRIMARY KEY (`pro_id`);


ALTER TABLE `tbl_programadores`
MODIFY `pro_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6;

CONCLUSIÓN

En este tutorial hemos visto cómo generar campos de entrada dinámicos mediante el uso de Jquery repetidor plugin e insertar en mysql mediante el uso de Ajax con PHP.

  • Hemos aprendido a implementar para ahorrar recursos de nuestros servidores para que nuestra página sea más veloz
  • La curva de aprendizaje es muy baja y es fácil de implementar
  • Para guardar los campos en la base de datos hemos usado PDO PHP y MySQL
  • Por otro lado, para almacenar los registros hemos usado Ajax PHP
Descarga 156 Sistemas PHP & MySQL

¿Te gusto el artículo? Puedes apoyarme invitándome un Café

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!.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba