Resumen
Crear un formulario dinámico en PHP que permita agregar campos de manera dinámica (a través de un botón) y permita guardarlos de igual manera
Formularios y PHP
Los formularios estáticos funcionan cuando la información tiene una longitud fija y la sabemos al crear el formulario; pero, ¿qué pasa cuando la cantidad de datos puede variar y no sabemos cuántos datos habrá?
Con PHP es muy fácil construir un formulario dinámico que permita agregar campos al presionar un botón.
La magia de []
Los arreglos son posibles dentro de los formularios de HTML, puede haber varios campos que apunten a un arreglo usando el nombre del input seguido de [] por ejemplo:
<input name="nombres[]">
De esa manera podemos tener campos infinitos que estén dentro de un arreglo; después de tenerlos guardados en un arreglo los dibujamos recorriendo el arreglo.
Veamos el ejemplo.
Formulario dinámico con PHP
Vamos a crear un formulario dinámico con PHP que podrá tener campos infinitos. El código es el siguiente:
<html>
<head>
<title>Formulario dinámico</title>
</head>
<body>
<?php
# La lista de nombres; por defecto vacía
$nombres = [];
# Si hay nombres enviados por el formulario; entonces
# la lista es el formulario.
# Cada que lo envíen, se agrega un elemento a la lista
if (isset($_POST["nombres"])) {
$nombres = $_POST["nombres"];
}
# Detectar cuál botón fue presionado
# Más info: [https://parzibyte.me/blog/posts/php-formulario-dos-botones/](https://parzibyte.me/blog/posts/php-formulario-dos-botones/)
# En caso de que haya sido el de guardar, no agregamos más campos
if (isset($_POST["guardar"])) {
# Quieren guardar; no quieren agregar campos
echo "OK se guarda lo siguiente:<br>";
print_r($nombres);
exit;
}
?>
<form method="post" action="index.php">
<!--Comienza el ciclo que dibuja los campos dinámicos-->
<?php foreach ($nombres as $nombre) { ?>
<input value="<?php echo $nombre ?>" type="text" name="nombres[]">
<br><br>
<?php } ?>
<!--Termina el ciclo que dibuja los campos dinámicos-->
<!--Fuera de la lista tenemos siempre este campo, es el primero-->
<input autocomplete="off" autofocus value="" type="text" name="nombres[]">
<br><br>
<button name="agregar" type="submit">Agregar campo</button>
<button name="guardar" type="submit">Guardar lista</button>
</form>
</body>
</html>
En este caso tenemos una lista de nombres. Por defecto es un arreglo vacío, pero al enviar el formulario, se creará la lista gracias al input que está fuera del foreach.
Si la lista tiene elementos (eso pasa una vez que alguien presiona el botón de Agregar campo) entonces se dibujan cuando sucede el ciclo, y así se permite agregar varios campos.
Como ves, el formulario se está enviando al mismo archivo; esto es para poder dibujar los campos o inputs dinámicos.
También estamos detectando cuál botón fue presionado y si es el botón de “Guardar lista” se muestra la lista de nombres.