Hay veces que necesitamos añadir dinámicamente campos inputs en un formulario. Para satisfacer esas necesidades he creado un script donde puedes agregar y eliminar campos de forma sencilla. Este script también es la mar de útil para añadir múltiples valores en PHP. En este tutorial veremos cómo generar campos inputs sobre la marcha en un formulario para que después, se puedan enviar sus pertenecientes valores a una base de datos. Para ello utilizaremos jQuery, que nos ayudará a que la implementación sea corta, simple y potente. Puedes añadir campos y eliminarlos dinámicamente de forma sencilla. También podrás obtener el valor de dichos campos en un script de PHP, una vez se envíe el formulario.
Javascript
Lo primero que tenemos que hacer es incluir la librería jQuery.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
Para entender el script de más abajo hay que leer los comentarios. La variable maxField contendrá el número máximo de campos al incrementar, la variable addButton gestiona el botón de añadir campos, la variable wrapper hace referencia al div contenedor de todos los campos inputs y la variable fieldHTML contiene el HTML de cada nuevo campo input.
Una vez se hace clic en el botón de Añadir, comprobaremos el máximo de campos que hemos establecido en la variable maxField. Si el contador es menor a maxField, se insertará un nuevo campo input dentro del div padre, ya sabés, la variable wrapper. También incrementaremos el contador de campos.
Una vez se hace clic en el botón de Eliminar, eliminaremos el div padre de ese elemento en particular. También reduciremos el contador a uno.
<script type="text/javascript">
$(document).ready(function(){
var maxField = 10; // Numero maximo de campos
var addButton = $('.add_button'); // Selector del boton de Insertar
var wrapper = $('.field_wrapper'); // Contenedor de campos
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; // Iniciamos el contador a 1
$(addButton).click(function(){ // Una vez que se haga clic en el boton
if(x < maxField){ //Comprobamos el maximo
x++; //Increment field counter
$(wrapper).append(fieldHTML); // Añadimos el HTML
}
});
$(wrapper).on('click', '.remove_button', function(e){ // Una vez se ha hecho clic en el boton de eliminar
e.preventDefault();
$(this).parent('div').remove(); //Eliminamos el div
x--; // Reducimos el contador a 1
});
});
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 vez se hayan enviado los múltiples campos del formulario, obtendrás sus valores como un array en el script de PHP.
<?php
print '<pre>';
print_r($_REQUEST['field_name']);
print '</pre>';
//output
Array
(
[0] => value1
[1] => value2
[2] => value3
[3] => value4
)
?>
Ahora puedes recorrerlos mediante un bucle e insertar dichos valores en la base de datos.
<?php
$field_values_array = $_REQUEST['field_name'];
foreach($field_values_array as $value){
//your database query goes here
}
?>
Fuente: codexworld.com