Formulario dinámico con PHP

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á?

Formulario dinámico con PHP – Agregar campos o enviar formulario

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/2019/07/23/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.

Estoy aquí para ayudarte 🤝💻

Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/