Buenas a todos hoy les traigo este metodo para crear cajas o inputs de forma dinamica.
Para empezar es un aporte para los que no saben y tambien peticion de ayuda para algo simple que me a dado dolor de cabeza. bueno comienzo..
Comenzamos con hacer un script que nos crea los inputs que queramos y al mismo tiempo borrarlos. Les doy el ejemplo con dos inputs uno se llama "t" y "c" nomble clave de cada input puede ser el que quieran pero si tiene que ser compuesto con + [] ya que lo utilizamos para reconocer y guardar cada input que agreguemos
<script type="text/javascript">
icremento =0;
function crear(obj) {
icremento++;
field = document.getElementById('field');
contenedor = document.createElement('div');
contenedor.id = 'div'+icremento;
field.appendChild(contenedor);
boton = document.createElement('input');
boton.type = 'text';
boton.name = 't'+'[]';
boton.size='30';
boton.placeholder='Item';
contenedor.appendChild(boton);
boton = document.createElement('input');
boton.type = 'number';
boton.name = 'c'+'[]';
boton.size='10';
boton.placeholder='Cantidad';
contenedor.appendChild(boton);
function borrar(obj) {
field = document.getElementById('field');
field.removeChild(document.getElementById(obj));
}
</script>
la ultima parte de borrar nos sirve para agregar un boton de borrar inputs no deseados.
EL FORM
En el form ingresaremos otros datos que necesitemos, no afecta en lo absoluto pero en el ejemplo trabajaremos solo creando los inputs dinamicos.
<form action="enviar.php" method="post" name="solicitud" id="solicitud">
<input type="button" value="Crear caja de texto" onClick="crear(this)">
<div class="field" id="field"> </div>
<input class="form-btn" id="enviar"type="submit" value="Enviar" />
</form>
como pueden ver la diferencia de este form es que tenemos un boton y un div
el boton es el que nos agrega los inputs haciendo llamado a la funcion y los agrega al div llamado "field" y listo tenemos un formulario dinamico!!!
Nota tenemos que cargar la libreria de jquery.min.js
Agregar o enviar los datos
Para empezar vamos a declarar las variable que asignáremos a los dos inputs
que creamos
Datos de conexión
$host = "xxxx";
$user = "xxxx";
$pw = "xxx";
$db = "xxx";
Declaramos dos variables para los dos inputs
$item= array();
$cantidad= array();
Y aqui la magia
//aqui tomo el id cuando agregamos a una base de datos
$id_soli=mysql_insert_id();
//Luego creamos una referencia del nombre clave dado a cada input. y agregamos a la base de datos
foreach($_POST['t'] as $key=>$value)
$item[]= $value;
foreach($_POST['c'] as $key=>$value)
$cantidad[]= $value;
for($i=0; $i<count($item); $i++) {
mysql_select_db($db, $con);
mysql_query("INSERT INTO productos (id,item,cantidad)
VALUES ('$id_soli','$item[$i]','$cantidad[$i]')",$con)or die(mysql_error());
}
//Esta ultima parte es para cuando cargamos los datos, se necesita hacer un ciclo para que tome todos los datos de lo contrario solo mostrara el ultimo. es importante pone la misma variable dentro de la variable datos
$Datos = $Datos . "ITEM: " . $item[$i] . " CANTIDAD: " . $cantidad[$i] .;
}
este a sido mi aporte para ustedes. e investigado en varios lados para llegar a esta forma simple para hacer inputs dinamicos.
Y por ultimo tengo mi gran duda y dolor de cabeza como puedo agregar la funcion "required" a los inputs ya que lo e intendado de mil maneras y no funciona. saludos
boton = document.createElement('input');
boton.type = 'number';
boton.name = 'c'+'[]';
boton.size='10';
boton.placeholder='Cantidad';
contenedor.appendChild(boton);
