Problema al recoger con $_POST los campos añadidos dinámicamente

luison99 · #1 (**permalink**) 16/05/2011, 06:18

Hola,

a ver si alguien me puede ayudar con esto, que estoy muy atascado y he visto en otros foros mucha gente con el mismo problema:

Tengo un formulario, donde añado campos dinámicamente con una función Javascript (usando insertCell, td.innerHTML="<input text id=..., name=...>").

El problema es que luego no puedo recoger el valor de estos campos añadidos dinámicamente con $_POST, es como si no existieran dentro del formulario !!!

¿Cómo puedo hacer para arreglar esto? Estaría muy agradecido si alguien me guiara un poco.

Gracias!

alexg88 · #2 (**permalink**) 16/05/2011, 06:24

Sería más fácil ayudarte si nos pones el código que no te funciona, tanto la parte del formulario como del php que recoge los datos.

luison99 · #3 (**permalink**) 16/05/2011, 09:42

Pues aki lo pongo (en esencia, quitando detalles superfluos):

El formulario:
----------------------------------------------------------------------------------------------
<form id='addpista' action='gestion_pistas.php?accion=add' METHOD = 'post' target='_self'>

<table id='tabla' width='50%' border='2' align='center' cellpadding='4' cellspacing='0'>
<tr><th>Slot</th><th>Hora inicio</th><th>Hora fin</th><th>Duracion(m)</th></tr>

<tr><td align='center'><input type='text' size='2' id='turno' name='turno[]' value='1' readonly></td>
<td align='center'><input type='text' size='5' id='horaini1' name='horaini[]' value='08:00h' readonly>&nbsp&nbsp<input type='button' value='+' onclick='inc_horaini(1);'>&nbsp&nbsp<input type='button' value='-' onclick='dec_horaini(1);'></td>
<td align='center'><input type='text' size='5' id='horafin1' name='horafin[]' value='09:00h' readonly>&nbsp&nbsp<input type='button' value='+' onclick='inc_horafin(1);'>&nbsp&nbsp<input type='button' value='-' onclick='dec_horafin(1);'></td>
<td align='center'><input type='text' size='5' id='duracion1' name='duracion[]' value='60' readonly>&nbsp&nbsp<input type='button' value='+' onclick='inc_duracion(1);'>&nbsp&nbsp<input type='button' value='-' onclick='dec_duracion(1);'></td>

</tr></table>
<tr><td><input type='button' id='addslot' value='+ slot' onclick=\"add_slot()\"></td><td><input type='button' id='addslot' value='- slot' onclick=\"del_slot()\"></td></tr>

<tr><td><input type='submit' id='addok' value='Aceptar'></td><td><input type='button' value='Cancelar' onclick='Javascript:history.back();'></td></tr>
</table>
</form>
------------------------------------------------------------------------------------------------------
El formulario consta de una fila con 4 campos (que los pongo con nombre de array pq se crearán más filas en la tabla dinámicamente), según esta función:

<script languaje="JavaScript">

var contslots = 1;

function add_slot() {
var turno_ant=document.getElementById('turno').value;
var tabla = document.getElementById("tabla");

var hi=document.getElementById('horaini'+contslots).va lue;
var hf=document.getElementById('horafin'+contslots).va lue;
var dur=document.getElementById('duracion'+contslots). value;
var hi_nextslot=hf;
var hf_nextslot=hi_nextslot+dur;

dur= 1*dur
hora = 1*(hi_nextslot.substr(0,2))
minuto = 1*(hi_nextslot.substr(3,2)) + dur

while (minuto >= 60) {
hora++;
minuto -=60;
}
hora = hora.toString();
minuto = minuto.toString();

hf_nextslot = (hora.length==1 ? "0"+hora:hora) + ":" + (minuto.length==1 ? "0"+minuto:minuto) + "h";

contslots++;

tr = tabla.insertRow(tabla.rows.length);
td = tr.insertCell(tr.cells.length);

td.innerHTML = "<input type='text' size='2' id='turno' name='turno[" + contslots + "]' value='" + contslots + "' readonly>";
td = tr.insertCell(tr.cells.length);

td.innerHTML = "<input type='text' size='5' id='horaini" + contslots + "' name='horaini[" + contslots + "]' value='" + hi_nextslot + "' readonly>&nbsp&nbsp<input type='button' value='+' onclick='inc_horaini(" + contslots + ");'>&nbsp&nbsp<input type='button' value='-' onclick='dec_horaini(" + contslots + ");'>";
td = tr.insertCell(tr.cells.length);

td.innerHTML = "<input type='text' size='5' id='horafin" + contslots + "' name='horafin[" + contslots + "]' value='" + hf_nextslot + "' readonly>&nbsp&nbsp<input type='button' value='+' onclick='inc_horafin(" + contslots + ");'>&nbsp&nbsp<input type='button' value='-' onclick='dec_horafin(" + contslots + ");'>";
td = tr.insertCell(tr.cells.length);

td.innerHTML = "<input type='text' size='5' id='duracion" + contslots + "' name='duracion[" + contslots + "]' value='" + dur + "' readonly>&nbsp&nbsp<input type='button' value='+' onclick='inc_duracion(" + contslots + ");'>&nbsp&nbsp<input type='button' value='-' onclick='dec_duracion(" + contslots + ");'>";
}

</script>

--------------------------------------------------------------------------------------------------------
Luego en la parte de procesado del formulario con PHP , miro lo que hay en el $_POST con un foreach y sólo están los datos de la primera línea (la que había en el formulario original). Los campos de las líneas añadidas dinámicamente no aparecen en el $_POST !!!

ocp001a · #4 (**permalink**) 16/05/2011, 09:57

No puedes agregar campos a un formulario escribiendo inputs directamente en html, para esto necesitas agregar campos mediante instrucciones precisas como createElement y appendChild.

En otras palabras mediante javascript debes ir agregando campo "hijos" al formulario. Mira esta liga para que te aclare un poco.

luison99 · #5 (**permalink**) 18/05/2011, 11:53

Cita:

Iniciado por ocp001a

No puedes agregar campos a un formulario escribiendo inputs directamente en html, para esto necesitas agregar campos mediante instrucciones precisas como createElement y appendChild.

En otras palabras mediante javascript debes ir agregando campo "hijos" al formulario. Mira [URL="http://www.webtaller.com/construccion/lenguajes/javascript/lecciones/funcion-createelement-appendchild-javascript.php"]esta [/URL]liga para que te aclare un poco.

Disculpa mi ignorancia en el tema, ¿qué tengo que crear con createElement ... los inputs del formulario y hacer un appenChild al elemento padre que es el formulario? Pero los inputs dinámicos se crean sobre una tabla, o sea que habrá que hacer un createElement por cada fila nueva de esa tabla, ¿no? O esa parte del código la puedo dejar como estaba usando tabla.insertRow y tr.insertCell ??

Muchas gracias de nuevo.

ocp001a · #6 (**permalink**) 18/05/2011, 12:33

Si estás usando la tabla para posicionar los elementos, deberías mejor usar <label> y darles diseño con css, así no habría problema en crear nuevos elementos y añadirlos al form.

De otra forma mejor te sugiero crear todos los campos de una vez y ocultar o mostrarlos según convenga.

luison99 · #7 (**permalink**) 19/05/2011, 12:12

Cita:

Iniciado por ocp001a

Si estás usando la tabla para posicionar los elementos, deberías mejor usar <label> y darles diseño con css, así no habría problema en crear nuevos elementos y añadirlos al form.

De otra forma mejor te sugiero crear todos los campos de una vez y ocultar o mostrarlos según convenga.

hola, bueno el formato CSS me da un poco igual. He intentado adaptar mi script al ejemplo que me indicabas arriba (usando createElement y appenChild, pero no me funciona!), sigo sin recibir en el $_POST los campos del formulario creados dinámicamente. En algo no estoy cayendo en cuenta

La opción de crear el formulario oculto de primeras me gusta menos, por el hecho de dejar huecos (el espacio que ocuparían las filas ocultas de la tabla hasta el botón de submit) que queda mal a la vista del usuario.

En fin, seguiré dándole vueltas!!

Muchas gracias.

alexg88 · #8 (**permalink**) 19/05/2011, 12:25

Cuando te dice campos ocultos, se refiere a que no aparecen al usuario (ni siquiera un espacio en blanco).

De todos modos, pon el código que utilizas en el php para recoger los parámetros, que puede que el problema esté ahí.

luison99 · #9 (**permalink**) 20/05/2011, 13:49

Cita:

Iniciado por alexg88

Cuando te dice campos ocultos, se refiere a que no aparecen al usuario (ni siquiera un espacio en blanco).

De todos modos, pon el código que utilizas en el php para recoger los parámetros, que puede que el problema esté ahí.

El código que utilizo para ver que efectivamente no se recogen más parámetros que la primera fila (la que viene de serie en el formulario) es bastante simple:

foreach($_POST as $nombre_campo => $valor){
echo "<br>". $nombre_campo . "," . $valor;
}

luison99 · #10 (**permalink**) 20/05/2011, 14:47

Hola, acabo de descubrir dónde está el problema, pero necesito que me ayudéis a resolverlo.

Si el formulario lo meto entero dentro de una tabla sobre la que creo los elementos dinámicos (filas con celdas) entonces funciona (es decir, los elementos que creo dinámicamente se quedan "registrados" en el formulario y los puedo rescatar con $_POST).

Pero si la tabla sobre la que creo los elementos dinámicos está dentro del formulario, es decir sólo cubre parte de los elementos del formulario, mientras que otros quedan fuera (como en el ejemplo que os puse), entonces no funciona.

El problema es que yo lo que quiero precisamente es lo 2º, es decir crear dinámicamente elementos en una tabla que es una subparte del formulario. Pero entonces... cómo le digo en la función que los elementos los quiero insertar en esa tabla, pero que la tabla es parte del formulario ???

Gracias.

alexg88 · #11 (**permalink**) 20/05/2011, 14:49

Ves, ahí está el problema. Si te fijas bien, los parámetros que mandas son de la forma parametro[num].

Para recoger esos valores tienes que hacerlo de la siguiente manera:

Código PHP:

Ver original$POST['horaini'][0] //Recoges el valor del primer input con name horaini
$POST['horaini'][1] //Recoges el valor del segundo input con name horaini
$POST['turno'][0] //Recoges el valor del primer input con name turno
}

Por supuesto, lo harás con un bucle, pero fijate que es una array de dos dimensiones (por que es en lo que lo convierte PHP tras recibir los parámetros de la forma horaini[0]=valor, horaini[1]=valor, etc.

alexg88 · #12 (**permalink**) 20/05/2011, 14:53

Me parece que te estás liando tú solito. En el código que has puesto, sí creas los elementos dentro del formulario. Yo he probado tu código y te digo que si envía los parámetros, el problema es que no los recibes bien como ya he comentado.

luison99 · #13 (**permalink**) 21/05/2011, 06:15

Cita:

Iniciado por alexg88

Me parece que te estás liando tú solito. En el código que has puesto, sí creas los elementos dentro del formulario. Yo he probado tu código y te digo que si envía los parámetros, el problema es que no los recibes bien como ya he comentado.

Alexg88, gracias por los comentarios, llevas razón en eso, pero no es un problema de recibir los parámetros por array, de hecho ya había probado como tú indicas y tampoco funcionaba. El origen del problema radica en que en el formulario había 2 tablas anidadas, es decir una tabla principal englobando todo el formulario y dentro de esta una subtabla para la parte dinámica , sobre la que actúo añadiendo elementos en la función de manera dinámica. Bien pues esto causa un problema a la hora de registrar los valores en el formulario.

Eliminando la tabla principal he conseguido resolver el problema. De hecho ahora me funciona con ambos métodos: con createElement() + appendChild(), o bien usando td.innerHTML.

Te envío el código nuevo que me funciona:

<p align='center' class='Estilo3'>Por favor, añada los siguientes campos para la nueva pista y pulse aceptar:<br/><br/></p>
<form id='addpista' action='gestion_pistas.php?accion=add' METHOD = 'post' target='_self' onsubmit='return chequear_formulario(this)'>
<div align='center'><table>
<tr><td>Nombre:</td><td><input type='text' size='60' id='nombre_pista' name='nombre_pista' value=''></td></tr>
<tr><td>Descripción:</td><td><input type='text' size='60' id='descr_pista' name='descr_pista' value=''></td></tr>
<tr></tr><tr></tr>

<tr><td><h3>Horario de la pista:</h3></td><td></td></tr>
</table>
<table id='tabla' width='50%' border='2' align='center' cellpadding='4' cellspacing='0'>
<tr><th>Slot</th><th>Hora inicio</th><th>Hora fin</th><th>Duracion(m)</th></tr>

<tr><td align='center'><input type='text' size='2' id='turno' name='turno1' value='1' readonly></td>
<td align='center'><input type='text' size='5' id='horaini1' name='horaini1' value='08:00h' readonly>&nbsp&nbsp<input type='button' value='+' onclick='inc_horaini(1);'>&nbsp&nbsp<input type='button' value='-' onclick='dec_horaini(1);'></td>
<td align='center'><input type='text' size='5' id='horafin1' name='horafin1' value='09:00h' readonly>&nbsp&nbsp<input type='button' value='+' onclick='inc_horafin(1);'>&nbsp&nbsp<input type='button' value='-' onclick='dec_horafin(1);'></td>
<td align='center'><input type='text' size='5' id='duracion1' name='duracion1' value='60' readonly>&nbsp&nbsp<input type='button' value='+' onclick='inc_duracion(1);'>&nbsp&nbsp<input type='button' value='-' onclick='dec_duracion(1);'></td>
</tr>
</table>
<tr><td><input type='button' id='addslot' value='+ slot' onclick=\"add_slot()\"></td><td><input type='button' id='addslot' value='- slot' onclick=\"del_slot()\"></td></tr>

<br><br>
<tr><td><input type='submit' id='addok' value='Aceptar'></td><td><input type='button' value='Cancelar' onclick='Javascript:history.back();'></td></tr>
</form>

Y la función para añadir filas (slots):

var contslots = 1;

function add_slot() {
var turno_ant=document.getElementById('turno').value;
var tabla = document.getElementById("tabla");

var hi=document.getElementById('horaini'+contslots).va lue;
var hf=document.getElementById('horafin'+contslots).va lue;
var dur=document.getElementById('duracion'+contslots). value;
var hi_nextslot=hf;
var hf_nextslot=hi_nextslot+dur;

dur= 1*dur
hora = 1*(hi_nextslot.substr(0,2))
minuto = 1*(hi_nextslot.substr(3,2)) + dur

while (minuto >= 60) {
hora++;
minuto -=60;
}
hora = hora.toString();
minuto = minuto.toString();

hf_nextslot = (hora.length==1 ? "0"+hora:hora) + ":" + (minuto.length==1 ? "0"+minuto:minuto) + "h";

contslots++;

tr = tabla.insertRow(tabla.rows.length);
tr.align="center";
td = tr.insertCell(tr.cells.length);

td.innerHTML = "<input type='text' size='2' id='turno' name='turno" + contslots + "' value='" + contslots + "' readonly>";
td = tr.insertCell(tr.cells.length);

td.innerHTML = "<input type='text' size='5' id='horaini" + contslots + "' name='horaini" + contslots + "' value='" + hi_nextslot + "' readonly>&nbsp&nbsp<input type='button' value='+' onclick='inc_horaini(" + contslots + ");'>&nbsp&nbsp<input type='button' value='-' onclick='dec_horaini(" + contslots + ");'>";
td = tr.insertCell(tr.cells.length);

td.innerHTML = "<input type='text' size='5' id='horafin" + contslots + "' name='horafin" + contslots + "' value='" + hf_nextslot + "' readonly>&nbsp&nbsp<input type='button' value='+' onclick='inc_horafin(" + contslots + ");'>&nbsp&nbsp<input type='button' value='-' onclick='dec_horafin(" + contslots + ");'>";
td = tr.insertCell(tr.cells.length);

td.innerHTML = "<input type='text' size='5' id='duracion" + contslots + "' name='duracion" + contslots + "' value='" + dur + "' readonly>&nbsp&nbsp<input type='button' value='+' onclick='inc_duracion(" + contslots + ");'>&nbsp&nbsp<input type='button' value='-' onclick='dec_duracion(" + contslots + ");'>";
}