Problema con campos dinamicos y arrays

angel_flores_694 · #1 (**permalink**) 17/06/2011, 12:25

Buen día a todos.

Les comento que apenas estoy aprendiendo estod e la programación en PHP y MyAdmin.

En la empresa donde trabajo (ferretera), he estado desarrollando un proyecto. Tengo un formulario en htm, que tiene una opción de insertar campos dinamicamente. El objetivo de este es que los clientes puedan ingresar y ellos mismos determinen cuantos articulos quieren comprar (algo similar a un carrito de compras" pero muy sencillo y escueto. Al hacer ellos click en "Añadir Articulo (Codigo) van apareciendo nuevos campos automaticamente, y pues le puse que cuando lleguen a 30 les mande un aviso. Hasta aqui todo esta bien, pero mi pregunta es: como hago que cada uno de esos campos nuevos se puedan guardar en una base de datos que tengo? Por ahi leí que se podría hacer con un array, pero por mas que le busco no encuentro como. Alguna idea?

El código es el siguiente:

<html>
<head>
<script type="text/javascript">
counter = 1;
function agregarCampo()
{
var x = document.getElementById("campos_txt");
var campo = document.createElement("input");
// campo.setAttribute('type', "text");
// campo.setAttribute('name', "texto"+counter);
// campo.setAttribute('id', "texto"+counter);
var br = document.createElement("br");
// Pone nombre del Articulo + Número de campo
x.appendChild(document.createTextNode("Articulo "+counter+" : "));
// Hace que aparezca el campo.
x.appendChild(campo);
x.appendChild(br);
counter++;
if (counter>30)
{
alert("Ha excedido el límte de 30 pedidos. Aunque agregue más, solamente se grabaran 30 códigos.");
}
}
function borrarElemento()
{
var x = document.getElementById("campos_txt");
x.removeChild(x.lastChild);
x.removeChild(x.lastChild);
x.removeChild(x.lastChild);
}

</script>
<script LANGUAGE="JavaScript">

</script>

<style type="text/css">

</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<table width="607">
<tr>
<td width="204" rowspan="2"><div align="center"><img src="file:///C|/Documents and Settings/Administrador/Escritorio/ANGEL/WEB RS DISTRIBUCIONES/logorsdistbco.png" width="204" height="159" /></div></td>
<td width="872"><div align="center">
<p><span class="Estilo6"><span class="Estilo10">RS Distribuciones, S.A. de C.V.</span><br />
</span><strong>Formulario de Pedido de Material</strong></p>
<p class="Estilo13"> </p>
</div></td>
</tr>
<tr>
<td bgcolor="#0000FF"><div align="center" class="Estilo6"><span class="Estilo15">¡Restringido a 30 códigos por formulario!</span></div></td>
</tr>
</table>
<table width="604" border="1" bordercolor="#FFFFFF" bgcolor="#FF6600">
<tr>
<td> </td>
</tr>
</table>
<br>
<form id="form1" name="form1" method="post" action="file:///C|/Documents and Settings/Administrador/Escritorio/ANGEL/WEB RS DISTRIBUCIONES/agregapedidos.php" onSubmit="return checkFields();">
<table width="771" border="0">
<tr>
<td width="189"><span class="Estilo8">No. de Cliente:</span></td>
<td width="166"><span class="Estilo2">
<input type="text" name="nocliente" id="nocliente">
</span></td>
<td width="394"><span class="Estilo12">Ejemplo: 1974 debera escribirse 001974<br>
Ejemplo: 635 debera escribirse 000635</span></td>
</tr>
<tr>
<td><span class="Estilo8">Nombre del Cliente:</span></td>
<td colspan="2"><span class="Estilo2">
<input type="text" name="nombrecliente2" id="nombrecliente2">
</span></td>
</tr>
</table>
<h6 class="Estilo2">Ingresar pedido:</h6>
<p class="Estilo2"><span class="Estilo13">Ayuda: </span><br>
<br>
Para ingresar su pedido, debe antes determinar cuantos códigos va a ingresar. <br>
Por ejemplo, si solamente requiere ingresar 7 códigos, presione solamente 7 veces en la línea "Añadir Articulo (Código)"<br>
para que aparezcan 7 campos únicamente, y automáticamente aparecera: "Articulo 1:", "Articulo 2:", etc.<br>
<br>
Ingrese los códigos que requiere uno por cada línea. Si se equivocó en la cantidad de códigos, simplemente deje en blanco<br>
la información.</p>
<p class="Estilo2">Para ingresar los códigos y cantidad del producto solicitado, debera colocarse de la sig. manera:</p>
<p class="Estilo2">Ejemplo: Supongamos que queremos <strong>6</strong> piezas del código <strong>12593 </strong>(Cinta Masking Tape 2'X 50 Metros), deberemos ingresar el<br>
código y despues la cantidad, separada por un asterisco: <strong>12593*6</strong>.</p>
<p class="Estilo2">También es importante que nos deje sus comentarios, por ejemplo: Favor de entregar las carretillas armadas o el cliente pasara <br>
directamente a la oficina por el pedido, etc.</p>
<p class="Estilo2"><span class="Estilo13">IMPORTANTE:</span> <strong>LIMITADO UNICAMENTE A 30 CODIGOS POR FORMULARIO</strong>. Si desea agregar más códigos, vuelva a cargar el formulario.</p>
<p class="Estilo2"><a href="#" class="Estilo4" onClick="agregarCampo()"><span class="Estilo18">»</span> Añadir Articulo (Código)</a> <span class="Estilo17">«</span></p>
<div class="Estilo2" id="campos_txt"></div>
<p class="Estilo2">Comentarios sobre el pedido:<br>
<textarea name="comentarios" id="comentarios" cols="45" rows="5"></textarea>
</p>
<p class="Estilo2">
<span class="Estilo2">
<input type="submit" name="button" id="button" value="Enviar">
<input type="reset" name="button2" id="button2" value="Restablecer">
</span></p>
</form>

</body>
</html>

truman_truman · #2 (**permalink**) 17/06/2011, 14:59

Hola Primeramente tenes que ponerle un nombre a los campos que se generan dinamicamente, porque por lo que vi solo son <input>

deberias descomentar estas 3 lineas de la funcion javascript

// campo.setAttribute('type', "text");
// campo.setAttribute('name', "texto"+counter);
// campo.setAttribute('id', "texto"+counter);

Luego de eso en donde dice name="", tendrás que poner un nombre asi: codigo[]
esto hace que los campos generados dinamicamente sean un array por ejemplo
el primer campo será

codigo[0]

el segundo :
codigo[1]

el trecero:
codigo[2]

y asi sucesivamente...

Entonces cuando recibís los datos de formulario recibís el array asi

este es el primer imput
$_POST['codigo'][0]

el segundo:
$_POST['codigo'][0]

tercero:
$_POST['codigo'][2]

y asi....

para esto lo haces con un ciclo for
(lo pongo con un echo para que veas lo que pasa)

Código PHP:

Ver originalfor($i=0;$i<count($_POST['codigo']);$i++)
{
 
echo $_POST['codigo'][$i];
echo '<br />';
 
}

angel_flores_694 · #3 (**permalink**) 21/06/2011, 14:58

Gracias por su respuesta. A ver si entendí:

Me dices que en donde dice name="", pero no tengo un campo que se llame así. Qui za lo que te refieres es que ponga algo así, a ver si acierto:

<script type="text/javascript">
counter = 1;
function agregarCampo()
{
var x = document.getElementById("campos_txt");
var campo = document.createElement("input");
campo.setAttribute('type', "text");
campo.setAttribute('codigo[]', "texto"+counter);
campo.setAttribute('id', "texto"+counter);
var br = document.createElement("br");
// Pone nombre del Articulo + Número de campo
x.appendChild(document.createTextNode("Articulo "+counter+" : "));
// Hace que aparezca el campo.
x.appendChild(campo);
x.appendChild(br);
counter++;
if (counter>30)
{
alert("Ha excedido el límte de 30 pedidos. Aunque agregue más, solamente se grabaran 30 códigos.");
}
}
function borrarElemento()
{
var x = document.getElementById("campos_txt");
x.removeChild(x.lastChild);
x.removeChild(x.lastChild);
x.removeChild(x.lastChild);
}

</script>

O donde tengo que ponerlo?

Puede ser tambien así?:

campo.setAttribute('name', "codigo[]"+counter);

Gracias por su ayuda.