Foros del Web » Programando para Internet » Javascript »

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

Estas en el tema de Problema al recoger con $_POST los campos añadidos dinámicamente en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 16/05/2011, 07:18
Avatar de luison99  
Fecha de Ingreso: mayo-2011
Mensajes: 8
Antigüedad: 7 años, 6 meses
Puntos: 0
Problema al recoger con $_POST los campos añadidos dinámicamente

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!
  #2 (permalink)  
Antiguo 16/05/2011, 07:24
 
Fecha de Ingreso: abril-2011
Mensajes: 1.342
Antigüedad: 7 años, 6 meses
Puntos: 344
Respuesta: Problema al recoger con $_POST los campos añadidos dinámicamente

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.
  #3 (permalink)  
Antiguo 16/05/2011, 10:42
Avatar de luison99  
Fecha de Ingreso: mayo-2011
Mensajes: 8
Antigüedad: 7 años, 6 meses
Puntos: 0
Respuesta: Problema al recoger con $_POST los campos añadidos dinámicamente

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 !!!
  #4 (permalink)  
Antiguo 16/05/2011, 10:57
Colaborador
 
Fecha de Ingreso: mayo-2008
Ubicación: $MX['VZ']['Xalapa']
Mensajes: 3.005
Antigüedad: 10 años, 6 meses
Puntos: 528
Respuesta: Problema al recoger con $_POST los campos añadidos dinámicamente

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.
  #5 (permalink)  
Antiguo 18/05/2011, 12:53
Avatar de luison99  
Fecha de Ingreso: mayo-2011
Mensajes: 8
Antigüedad: 7 años, 6 meses
Puntos: 0
Respuesta: Problema al recoger con $_POST los campos añadidos dinámicamente

Cita:
Iniciado por ocp001a Ver Mensaje
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.
  #6 (permalink)  
Antiguo 18/05/2011, 13:33
Colaborador
 
Fecha de Ingreso: mayo-2008
Ubicación: $MX['VZ']['Xalapa']
Mensajes: 3.005
Antigüedad: 10 años, 6 meses
Puntos: 528
Respuesta: Problema al recoger con $_POST los campos añadidos dinámicamente

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.
  #7 (permalink)  
Antiguo 19/05/2011, 13:12
Avatar de luison99  
Fecha de Ingreso: mayo-2011
Mensajes: 8
Antigüedad: 7 años, 6 meses
Puntos: 0
Respuesta: Problema al recoger con $_POST los campos añadidos dinámicamente

Cita:
Iniciado por ocp001a Ver Mensaje
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.
  #8 (permalink)  
Antiguo 19/05/2011, 13:25
 
Fecha de Ingreso: abril-2011
Mensajes: 1.342
Antigüedad: 7 años, 6 meses
Puntos: 344
Respuesta: Problema al recoger con $_POST los campos añadidos dinámicamente

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í.
  #9 (permalink)  
Antiguo 20/05/2011, 14:49
Avatar de luison99  
Fecha de Ingreso: mayo-2011
Mensajes: 8
Antigüedad: 7 años, 6 meses
Puntos: 0
Respuesta: Problema al recoger con $_POST los campos añadidos dinámicamente

Cita:
Iniciado por alexg88 Ver Mensaje
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;
}
  #10 (permalink)  
Antiguo 20/05/2011, 15:47
Avatar de luison99  
Fecha de Ingreso: mayo-2011
Mensajes: 8
Antigüedad: 7 años, 6 meses
Puntos: 0
Respuesta: Problema al recoger con $_POST los campos añadidos dinámicamente

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.
  #11 (permalink)  
Antiguo 20/05/2011, 15:49
 
Fecha de Ingreso: abril-2011
Mensajes: 1.342
Antigüedad: 7 años, 6 meses
Puntos: 344
Respuesta: Problema al recoger con $_POST los campos añadidos dinámicamente

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
  1. $POST['horaini'][0] //Recoges el valor del primer input con name horaini
  2. $POST['horaini'][1] //Recoges el valor del segundo input con name horaini
  3. $POST['turno'][0] //Recoges el valor del primer input con name turno
  4. }

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.
  #12 (permalink)  
Antiguo 20/05/2011, 15:53
 
Fecha de Ingreso: abril-2011
Mensajes: 1.342
Antigüedad: 7 años, 6 meses
Puntos: 344
Respuesta: Problema al recoger con $_POST los campos añadidos dinámicamente

Me parece que te estás liando tú solito. En el código que has puesto, 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.
  #13 (permalink)  
Antiguo 21/05/2011, 07:15
Avatar de luison99  
Fecha de Ingreso: mayo-2011
Mensajes: 8
Antigüedad: 7 años, 6 meses
Puntos: 0
Respuesta: Problema al recoger con $_POST los campos añadidos dinámicamente

Cita:
Iniciado por alexg88 Ver Mensaje
Me parece que te estás liando tú solito. En el código que has puesto, 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 + ");'>";
}

Etiquetas: campos, post, recoger
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 10:02.