Añadir y eliminar campos inputs dinámicamente mediante jQuery

Hay veces que necesitamos añadir campos dinámicamente en un formulario. Para dichos propósitos hemos creado un script con el puedes añadir múltiple campos y eliminarlos de manera sencilla. Este script también es muy útil para añadir múltiples valores en PHP. En este tutorial hablaremos sobre generar campos inputs automáticamente en un formulario, para luego poder enviarlos a través de un submit a un archivo PHP e introducirlos en la base de datos. Utilizamos jQuery para no complicarnos la vida, es decir, para que la implementación sea corta y potente. Puedes añadir y eliminar campos dinámicamente de forma sencilla. También podrás rescatar el valor de dichos campos en tus scripts PHP, una vez se envíe el formulario.

Javascript

Primero de todo, incluímos la librería jQuery.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

Vamos a analizar el script que vas a ver más abajo. La variable maxField controla el número máximo de campos que puedes añadir, addButton controla el nombre de la clase del botón para añadir campos, la variable wrapper controla la clase del div padre de los campos inputs que añadas, la variable fieldHTML gestiona el código HTML de cada campo input que añadas.

Una vez se haga clic en el botón “Añadir”, comprobaremos el número máximo de campos inputs que se pueden añadir. Si el contador de campos (x) es menor que maxField, el nuevo campo input se añadirça dentro de un div padre con la clase que hemos definido en la variable wrapper. También se incrementará lógicamente el contador de campos.

Una vez se haga clic en el botón “Eliminar”, el div padre del campo en particular donde se ha hecho clic en el botón se eliminará. También disminuirá el contador de campos.

<script type="text/javascript">
$(document).ready(function(){
    var maxField = 10; //Input fields increment limitation
    var addButton = $('.add_button'); //Add button selector
    var wrapper = $('.field_wrapper'); //Input field wrapper
    var fieldHTML = '<div><input type="text" name="field_name[]" value=""/><a href="javascript:void(0);" class="remove_button" title="Remove field"><img src="remove-icon.png"/></a></div>'; //New input field html 
    var x = 1; //Initial field counter is 1
    $(addButton).click(function(){ //Once add button is clicked
        if(x < maxField){ //Check maximum number of input fields
            x++; //Increment field counter
            $(wrapper).append(fieldHTML); // Add field html
        }
    });
    $(wrapper).on('click', '.remove_button', function(e){ //Once remove button is clicked
        e.preventDefault();
        $(this).parent('div').remove(); //Remove field html
        x--; //Decrement field counter
    });
});
</script>

HTML:

<div class="field_wrapper">
    <div>
        <input type="text" name="field_name[]" value=""/>
        <a href="javascript:void(0);" class="add_button" title="Add field"><img src="add-icon.png"/></a>
    </div>
</div>

PHP:

Una se haya hecho submit al formulario, puedes recuperar los valores dentro de un array en el script PHP.

<?php
print '<pre>';
print_r($_REQUEST['field_name']);
print '</pre>';
//output
Array
(
    [0] => value1
    [1] => value2
    [2] => value3
    [3] => value4
)
?>

Ahora puedes recorrerlos en un bucle e insertar los valores dentro de la base de datos, o hacer con ellos lo que quieras.

<?php
$field_values_array = $_REQUEST['field_name'];
foreach($field_values_array as $value){
    //your database query goes here
}
?>

Fuente: codexworld.com