 |
| 22/08/2006 19:32 |
|
Registrado: 14/04/2004
Nº mensajes: 490
|
|
|
| |
Living |
 
|
|
|
| |
Muchas veces se da la circunstancia de que al crear un formulario no sabes cuantos campos vas a necesitar. Por ejemplo, imaginad que estais rellenando un formulario en el que hay que meter los datos relativos a los vehículos que posee una persona. Una persona puede tener un solo vehículo o tener 7. Una solución sería ir introduciendo los datos uno a uno y enviar el formulario cada vez, pero eso es lento y pesado para el usuario puesto que se tiene que recargar la página cada vez que se inserta un vehículo y lioso para el programador puesto que tiene que ir guardando los datos introducidos por la persona para que no se pierdan al recargar la página. Otra solución sería habilitar muchos campos, pero ¿cuántos poner?, ¿10?, ¿y si tiene 11?. Así que la mejor solución a mi entender es ir creando el formulario dinámicamente y añadiendo los campos que nos sean necesarios. Aquí os dejo un ejemplo sencillo de como construir el formulario con javascript y de como habría después que recoger los datos con PHP. Espero que os sea de utilidad.
<?
include "connect.php";
//Insertamos los diferentes registros del formulario
if (isset($_POST["nombre"])){
foreach ($_POST["nombre"] as $indice => $nombre) {
$apellidos=$_POST["apellidos"][$indice];
$telefono=$_POST["telefono"][$indice];
$query="INSERT INTO tabla (nombre,apellidos,telefono) VALUES ('$nombre','$apellidos','$telefono')";
mysql_query($query);
}
}
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo formulario</title>
<script language="javascript" type="text/javascript">
var indiceFilaFormulario=1;
function addPerson(){
myNewRow = document.getElementById("tablaFormulario").insertRow(-1);
myNewRow.id=indiceFilaFormulario;
myNewCell=myNewRow.insertCell(-1);
myNewCell.innerHTML="<td><input type='text' name='nombre["+indiceFilaFormulario+"]' ></td>";
myNewCell=myNewRow.insertCell(-1);
myNewCell.innerHTML="<td> <input type='text' name='apellidos["+indiceFilaFormulario+"]' ></td>";
myNewCell=myNewRow.insertCell(-1);
myNewCell.innerHTML="<td><input type='text' name='telefono["+indiceFilaFormulario+"]'></td>";
myNewCell=myNewRow.insertCell(-1);
myNewCell.innerHTML="<td><input type='button' value='Eliminar' onclick='removePerson(this)'></td>";
indiceFilaFormulario++;
}
function removePerson(obj){
var oTr = obj;
while(oTr.nodeName.toLowerCase()!='tr'){
oTr=oTr.parentNode;
}
var root = oTr.parentNode;
root.removeChild(oTr);
}
</script>
</head>
<body>
<form action="<?=$_SERVER['PHP_SELF']?>" name="formulario" method="post">
<table cellpadding="0" cellspacing="0" >
<tr>
<td align="center"> </td>
</tr>
<tr>
<td><table cellpadding='3' cellspacing='3' style='border:#999999 double' bgColor='bisque' id="tablaFormulario">
<tr bgColor='#CCCCCC'>
<td width="175">Nombre</td>
<td width="175">Apellidos</td>
<td width="175">Teléfono</td>
<td width="100">Eliminar</td>
</tr>
</table></td>
</tr>
<tr>
<td align="right"><input type="button" onClick="addPerson()" value="Añadir Persona" ></td>
</tr>
<tr>
<td align="center"><input type="submit" name="enviar" value="Enviar"></td>
</tr>
</table>
</form>
</body>
</html> |
|
|
| |
El mayor placer de un hombre inteligente es aparentar ser idiota, delante de un idiota que aparenta ser inteligente.
|
|
|
|
| 11/10/2007 19:39 |
|
Registrado: 11/10/2007
Nº mensajes: 5
|
|
|
| |
duke100 |
|
|
|
| |
Estimado Living
Lo felicito por su excelente script - mi problema es el siguiente unos de los campos que quiero habilitar dinamicamente es del tipo <SELECT NAME='cargo'
<OPTION VALUE='1'>Ingenierio</OPTION>
<OPTION VALUE='2'>Contador</OPTION>
<OPTION VALUE='3'>Administrador</OPTION>
</SELECT>
estoy buscando algo parecido al suyo:nombre apellido telefono y cargo
NOTA: le confieso algo estoy empezando a programar en php
de antemano muchas gracias
|
|
|
| |
|
|
|
|
| 11/10/2007 20:42 |
|
Registrado: 14/04/2004
Nº mensajes: 490
|
|
|
| |
Living |
|
|
|
| |
Hola duke100 y bienvenido 
No das muchos datos, pero en principio lo único que tienes que hacer es exactamente lo mismo que he hecho con los input text tú has de hacerlo con tu select, ni más ni menos. La parte de PHP no tendrías ni que tocarla.
Un saludo
|
|
|
| |
El mayor placer de un hombre inteligente es aparentar ser idiota, delante de un idiota que aparenta ser inteligente.
|
|
|
|
| 12/10/2007 21:49 |
|
Registrado: 11/10/2007
Nº mensajes: 5
|
|
|
| |
duke100 |
|
|
|
| |
estimado living
en tú script se entiende que cada campo está representado con el siguiente código
myNewCell=myNewRow.insertCell();
myNewCell.innerHTML="<td> <input type='text' name='campo["+indiceFilaFormulario+"]' ></td>";
la pregunta es cómo me quedaría si el campo es un combo por ejemplo:
<SELECT NAME='cargo'
<OPTION VALUE='1'>Ingenierio</OPTION>
<OPTION VALUE='2'>Contador</OPTION>
<OPTION VALUE='3'>Administrador</OPTION>
</SELECT>
yo lo probé de ésta manera
myNewCell=myNewRow.insertCell();
myNewCell.innerHTML="<td> <select name='cargo["+indiceFilaFormulario+"]' >
<option value='1'>Ingenierio</option>
<option value='2'>Contador</option>
<option value='3'>Administrador</option>
</select></td>";
de ésta manera me genera error: se espera un objeto
de antemano muchas gracias
saludo
|
|
|
| |
|
|
|
|
| 12/10/2007 23:34 |
|
Registrado: 14/04/2004
Nº mensajes: 490
|
|
|
| |
Living |
|
|
|
| |
Bueno, lo primero decirte que había un error en mi código que impedía que funcionase correctamente en firefox. A la función insertCell es obligatorio enviarle un parámetro, en este caso el valor -1 para indicar que es una celda que se va a añadir al final. En Explorer si no vasa ningún parámetro pone por defecto el -1 pero en firefox es obligatorio especificarlo.
Bueno, hecho ese cambio, vayamos a tu problema en concreto. El problema que estás teniendo es que NO estás poniendo todo el código en una sola línea (cosa que si puedes hacer en PHP) y javascript interpreta que estás ejecutando instrucciones diferentes y claro, da error porque para él no tienen sentido. Entonces, o lo dejas todo en la misma línea, o lo puedes dejar así:
myNewCell=myNewRow.insertCell(-1);
var nuevoSelect="";
nuevoSelect+="<td> <select name='cargo["+indiceFilaFormulario+"]' >";
nuevoSelect+="<option value='1'>Ingenierio</option> ";
nuevoSelect+="<option value='2'>Contador</option> ";
nuevoSelect+="<option value='3'>Administrador</option> ";
nuevoSelect+="</select></td>";
myNewCell.innerHTML=nuevoSelect;
Por cierto, me puedes hablar de tú sin ningún problema
|
|
|
| |
El mayor placer de un hombre inteligente es aparentar ser idiota, delante de un idiota que aparenta ser inteligente.
|
|
|
|
| 13/10/2007 20:07 |
|
Registrado: 11/10/2007
Nº mensajes: 5
|
|
|
| |
duke100 |
|
|
|
| |
correcto ahora si me funcionó
Cambiando de tema yo tengo unos tutoriales básico de javascript, por casualidad me recomienda algunos tutoriales mas completo.
un saludo y gracias |
|
|
| |
|
|
|
|
| 15/10/2007 14:26 |
|
Registrado: 14/04/2004
Nº mensajes: 490
|
|
|
|
| |
El mayor placer de un hombre inteligente es aparentar ser idiota, delante de un idiota que aparenta ser inteligente.
|
|
|
|
| 15/10/2007 22:49 |
|
Registrado: 11/10/2007
Nº mensajes: 5
|
|
|
|
| |
|
|
|
|
| 19/10/2007 21:25 |
|
Registrado: 19/10/2007
Nº mensajes: 2
|
|
|
| |
beocidio |
|
|
|
| |
Buenas:
He estado revisando sus mensajes y me han servido bastante para una aplicacion que estoy realizando donde un susuario debe ingresar una serie de transacciones monetarias a un sistema.
Para esto he modificado el script para que me muestre 2 filas de cuatro culumnas cada una con campos de texto y unos select que elaboro dinámicamente con php. Hasta ahi todo bien, hasta solucioné un problema que me dió firefox ya que me desarmaba la tabla en el momento de borra algun campo.
Pero la problemática es la siguiente. El script dibuja los nuevos campos en la parte superior a la tabla, o sea si tu ha escrto en algún campo y deseas agregar registros, estos aparecen arriba y los que has escrito ban bajando a medida que solicitas nuevos campos. Y el segundo y más importante, es que no puedo recojer los valores con php.
function addPerson(){
myNewRow = document.getElementById("campos").insertRow(0);
myNewRow.id=indiceFilaFormulario;
myNewCell=myNewRow.insertCell(-1);
myNewCell.innerHTML="<td>Articulo</td>";
myNewCell=myNewRow.insertCell(-1);
myNewCell.innerHTML=nuevoSelect;
myNewCell=myNewRow.insertCell(-1);
myNewCell.innerHTML="<td>Tipo de documento</td>";
myNewCell=myNewRow.insertCell(-1);
myNewCell.innerHTML=nuevoDoc;
myNewRow = document.getElementById("campos").insertRow(1);
myNewCell=myNewRow.insertCell(-1);
myNewCell.innerHTML="<td>Monto</td>";
myNewCell=myNewRow.insertCell(-1);
myNewCell.innerHTML="<td><input type='text' name='monto["+indiceFilaFormulario+"]'></td>";
myNewCell=myNewRow.insertCell(-1);
myNewCell.innerHTML="<td>Numero de boleta</td>";
myNewCell=myNewRow.insertCell(-1);
myNewCell.innerHTML="<td><input type='text' name='numero_boleta["+indiceFilaFormulario+"]'><a href='#' onclick='removePerson(this.parentNode.parentNode.rowIndex)'><img src='../img/menos.jpg' alt='Eliminar ingreso' style='border=0;'>Eliminar</a></td>";
indiceFilaFormulario++;
}
//la funcion javascript que agraga los campos
function removePerson(idFila){
document.getElementById("campos").deleteRow(idFila);
document.getElementById("campos").deleteRow((idFila-1));
}
//la funcion javascript que los elimina
if (isset($_POST["monto"])){
foreach ($_POST["monto"] as $indice => $monto) {
echo $_POST["articulo"][$indice];
echo $_POST["numero_boleta"][$indice];
}
}else{
echo "no llego monto";
}
//el php donde intento recojer los datos (claramente son líneas para ver si estos datos llegaron, no es que necesite los datos para realizar esta función en específico).
Si existe una solucion al agradeceria se sobremanera.
Saludos |
|
|
| |
Nada que decir hasta que me den motivos para decirlo
|
|
|
|
| 07/11/2007 14:19 |
|
Registrado: 07/11/2007
Nº mensajes: 5
|
|
|
| |
leo_25 |
|
|
|
| |
Hola Living sabes tu script me esta ayudando mucho pero podrias ayudarme, mira cuando lo cargo con firefox al eliminar se deforma la tabla por completo a que se deberia muchas gracias
el script lo tengo talcual lo posteaste
|
|
|
| |
leotrux
|
|
|
|
| 07/11/2007 14:35 |
|
Registrado: 19/10/2007
Nº mensajes: 2
|
|
|
| |
beocidio |
|
|
|
| |
Leo_25.
Tu problema se soluciona tan fácil como cambiando el parámetro de la función insertCell(), en donde en vez de dejar a todos las funciones como "-1" colocale un número correlativo en el caso de la función insertRow(), lo mismo.
|
|
|
| |
Nada que decir hasta que me den motivos para decirlo
|
|
|
|
|
