Ayuda formulario

gutibs · #1 (**permalink**) 24/07/2010, 17:12

Hola foreros, escribo para ver si me dan una mano con un formulario que estoy armando. Tengo una tabla donde pregunto que carreras corrio un caballo por año y en que posicion salio. Como de antemano no tengo idea si un caballo corre 1, 5, 10 o 60 carreras lo que quiero hacer es poner un boton para agregar una fila con los input type text para cada carrera. De todo lo que estuve mirando no hay nada que sea como lo que necesito (aviso que en java yÇ/o javascript soy un cero)
Bueno, les pego el codigo de la tabla con el form a ver como se podria hacer.
Mil gracias.
Perdon, la pagina está en PHP y si las variables las mando por get o post me es indistinto.

<form action="grabo.php" method="get" enctype="text/plain">

<table width="100%" border="1">
<tr>
<td>año</td>
<td>carrera</td>
<td>posicion</td>
<td>jockey</td>
</tr>
<tr>
<td><input type="text" name="ano_carrera" /></td>
<td><input type="text" name="nombre_carrera" /></td>
<td><input type="text" name="posicion_carrera" /></td>
<td><input type="text" name="jockey_carrera" /></td>
</tr>
</table>

</form>

maycolalvarez · #2 (**permalink**) 24/07/2010, 21:43

ACLARO: java y javascript no es lo mismo

tienes 2 formas de hacerlo:

con php, simplemente colocas un input (agregar x filas) y al enviarlo en php compruebas si se introdujo cierta cantidad, con ella haces un ciclo y generas las filas necesarias con los inputs.

con javascrpt es un poco más complicado, pero implica agregar manualmente cada fila, y cada input mediante DOM

NOTA: los nombres de los campos deben contener como prefijo los corchetes [], para que así php los reconozca como arrays:

Código HTML:

Ver original<td><input type="text" name="ano_carrera[]" /></td>
<td><input type="text" name="nombre_carrera[]" /></td>
<td><input type="text" name="posicion_carrera[]" /></td>
<td><input type="text" name="jockey_carrera[]" /></td>

gutibs · #3 (**permalink**) 25/07/2010, 06:54

Hola, gracias por las respuesta, me gustaria mas hacerlo con javascript, como encaro el tema del DOM ?
Alguna ayuda?
mil gracias.

Adler · #4 (**permalink**) 25/07/2010, 08:16

Hola

Algo como esto

Código Javascript:

Ver original<html>
<head>
<script type="text/javascript">
function crearCampos(cantidad){
var div = document.getElementById("campos_dinamicos");
while(div.firstChild)div.removeChild(div.firstChild); // remover elementos;
    for(var i = 1, cantidad = Number(cantidad); i <= cantidad; i++){
    var salto = document.createElement("P");
    var input = document.createElement("input");
    var text = document.createTextNode("Campo Dinamico " + i + ": ");
    input.setAttribute("name", "campo[]");
    input.setAttribute("id", "campo" + i);
    input.setAttribute("size", "12");
    input.className = "input";
    salto.appendChild(text);
    salto.appendChild(input);
    div.appendChild(salto);
    }
}
</script>
 
</head>
<body>
<form>
¿Cuantos Campos? <input type="text" name="cantidad" id="cantidad" value="" onkeyup="crearCampos(this.value);" />
<input type="button" id="boton" value="Crear/Eliminar Campos" onclick="crearCampos(this.form.cantidad.value);" />
<div id="campos_dinamicos"></div>
</form>
</body>
</html>

PD: Aunque sería más sencillo con cloneNode()

Suerte

gutibs · #5 (**permalink**) 25/07/2010, 11:57

Hola, lo que pasa es que no se si la gente que carga esto va a tener claro cuantas carreras de antemano; no hay forma de poner un boton "agregar otra carrera" y que se vaya agregando de a una?
Es simil a las experiencias laborales de las paginas de busqueda de empleo.
Mil gracias.

_cronos2 · #6 (**permalink**) 25/07/2010, 12:35

Código Javascript:

Ver originalvar numero = 1;
var donde = document.getElementById('donde');
function crear(){
 var input = document.createElement('input');
 input.type = 'text'
 input.setAttribute('id', numero);
 input.setAttribute('name', 'carrera'+numero+'[]');
 donde.appendChild(input);
 numero++;
}

Código HTML:

Ver original<div id='donde'></div>
<input type='button' onclick='crear();' value='Nueva carrera' />

¿Algo como esto?
Saludos (:

Adler · #7 (**permalink**) 25/07/2010, 13:38

Hola

Veamos que te parece este otro usando cloneNode()

Código Javascript:

Ver original<html>
<head>
<script type="text/javascript">
function addFilaATabla() {
var tbl = document.getElementById('Tabla');
var rows = tbl.getElementsByTagName('tr');
var len = rows.length;
var lastRow = rows[len-1];
var clone = lastRow.cloneNode(true);
 
clone.getElementsByTagName('input')[0] = lastRow.getElementsByTagName('input')[0];
clone.getElementsByTagName('input')[1] = lastRow.getElementsByTagName('input')[1];
clone.getElementsByTagName('input')[2] = lastRow.getElementsByTagName('input')[2];
clone.getElementsByTagName('input')[3] = lastRow.getElementsByTagName('input')[3];
 
clone.getElementsByTagName('input')[0].name = 'ano_carrera[]';
clone.getElementsByTagName('input')[1].name = 'nombre_carrera[]';
clone.getElementsByTagName('input')[2].name = 'posicion_carrera[]';
clone.getElementsByTagName('input')[3].name = 'jockey_carrera[]';
 
tbl.appendChild(clone);
}
 
 
function quitaFilaATabla() {
var tbl = document.getElementById('Tabla');
var lastRow = tbl.rows.length;
if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}
</script>
</head>
<body>
<form>
<table id="Tabla" width="100%" border="1">
<tr>
<td>año</td>
<td>carrera</td>
<td>posicion</td>
<td>jockey</td>
</tr>
<tr>
<td><input type="text" name="ano_carrera[]" /></td>
<td><input type="text" name="nombre_carrera[]" /></td>
<td><input type="text" name="posicion_carrera[]" /></td>
<td><input type="text" name="jockey_carrera[]" /></td>
</tr>
</table>
<br />
<input type="button" value="Añadir otra" onclick="addFilaATabla();" />
<input type="button" value="Eliminar última" onclick="quitaFilaATabla();" />
<br />
<input type="submit" value="enviar" />
</form>
</body>
</html>

Suerte

gutibs · #8 (**permalink**) 25/07/2010, 20:16

Buenisimo, por ahi viene la cosa, tengo una pregunta mas, solo de quisquilloso.
cuando agrego la fila, me repite los datos de la fila anterior, hay forma d eevitar eso?
millon de gracias igual.

Adler · #9 (**permalink**) 26/07/2010, 05:22

Hola

Eso ocurre por que al usar cloneNode, se clona el campo. Si a ese campo se le ha dado un valor, este también es clonado

Prueba con este otro

Código Javascript:

Ver original<html>
<head>
<title>Crear filas</title>
<script type="text/javascript">
var indiceFila = 0;
function NuevaFila() {
myNewRow = document.getElementById("Tabla").insertRow(-1);
 
        myNewCell=myNewRow.insertCell(-1);
        var elemento = document.createElement("INPUT");
        elemento.setAttribute("type","text");
        elemento.setAttribute("size","8");
        elemento.setAttribute("maxlength","15");
        elemento.setAttribute("name","codigo[]");
        elemento.setAttribute("id","codigo_" + indiceFila);
        myNewCell.appendChild(elemento);
 
        myNewCell=myNewRow.insertCell(-1);
        var elemento2 = document.createElement("INPUT");
        elemento2.setAttribute("type","text");
        elemento2.setAttribute("size","25");
        elemento2.setAttribute("maxlength","40");
        elemento2.setAttribute("name","nombre[]");
        elemento2.setAttribute("id","nombre_" + indiceFila);
        myNewCell.appendChild(elemento2);
 
        myNewCell=myNewRow.insertCell(-1);
        var elemento3 = document.createElement("INPUT");
        elemento3.setAttribute("type","text");
        elemento3.setAttribute("size","10");
        elemento3.setAttribute("maxlength","20");
        elemento3.setAttribute("name","unidad[]");
        elemento3.setAttribute("id","unidad_" + indiceFila);
        myNewCell.appendChild(elemento3);
 
        myNewCell=myNewRow.insertCell(-1);
        var elemento4 = document.createElement("INPUT");
        elemento4.setAttribute("type","text");
        elemento4.setAttribute("size","10");
        elemento4.setAttribute("maxlength","20");
        elemento4.setAttribute("name","cantidad[]");
        elemento4.setAttribute("id","cantidad_" + indiceFila);
        myNewCell.appendChild(elemento4);
 
indiceFila++;
}  
 
 
function quitaFilaATabla() {
var tbl = document.getElementById('Tabla');
var lastRow = tbl.rows.length;
if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}
</script>
</head>
<body>
<a href="javascript:void(0);" onClick="NuevaFila()">Adicionar Fila</a> || <a href="javascript:void(0);" onClick="quitaFilaATabla()">Eliminar Fila</a>
<br />
<form>
<table border="1px" id="Tabla">
<tr>
<td>CÓDIGO</td><td>NOMBRE</td><td>UNIDAD</td><td>CANTIDAD</td>
</tr>
<tr>
<td><input type="text" size="8" maxlength="15" name="codigo[]" id="codigo_0" /></td>
<td><input type="text" size="25" maxlength="40" name="nombre[]" id="nombre_0" /></td>
<td><input type="text" size="10" maxlength="20" name="unidad[]" id="unidad_0" /></td>
<td><input type="text" size="10" maxlength="20" name="cantidad[]" id="cantidad_0" /></td>
</tr>
</table>
<br />
<input type="submit" value="enviar" />
</form>
</body>

Suerte

gutibs · #10 (**permalink**) 26/07/2010, 15:42

Exactamente eso es lo que necesito.
Millon de gracias!!!!!!!