Foros del Web » Programando para Internet » Javascript »

Formulario complejo... Ayuda con el código

Estas en el tema de Formulario complejo... Ayuda con el código en el foro de Javascript en Foros del Web. Estoy haciendo un formulario, algo complicadillo, y soy bastante nueva en esto. No se si estoy proponiendo mal las preguntas, o es que no hay ...
  #1 (permalink)  
Antiguo 13/10/2008, 05:29
Avatar de glmarzoa  
Fecha de Ingreso: octubre-2008
Mensajes: 7
Antigüedad: 15 años, 6 meses
Puntos: 0
Formulario complejo... Ayuda con el código

Estoy haciendo un formulario, algo complicadillo, y soy bastante nueva en esto. No se si estoy proponiendo mal las preguntas, o es que no hay demasiada gente que sepa de formularios complejos, pero es que nadie contesta
A ver si por esta vez, tengo suerte

Lo que necesito hacer es: aumentar el número de filas de forma dinámica: en una fila hay un text box, en otra otro text box (de solo lectura) y un select. Cada valor guardado en el select, se corresponde con un número. Por eso, cuando yo cambio el valor del select, en el textbox de solo lectura, debe aparecer ese número. Para la primera fila (que no se crea dinámicamente, no hay problema), pero las demás no funcionan... Ya he probado de todo y consultado todo lo que se me ocurría. No se si tengo algún error en el código, o es que directamente lo que yo quiero hacer no se puede...

Si alguien sabe otra forma de hacerlo, o lo que sea...Agradezco la ayuda

<html>
<head>
<script language="JavaScript" >
var l=2;

function Prueba(){
var objTabla = document.getElementById("tabla");
var objTbody=objTabla.firstChild;
var objNuevaFila=objTbody.childNodes[1].cloneNode(true);

//cambiamos el contenido de las celdas
objNuevaFila.childNodes[0].innerHTML = "<input type =\"text\" name =\"Columna1."+l+"\" size=\"12\">";
objNuevaFila.childNodes[1].innerHTML = "<input type =\"text\" name =\"Columna2."+l+"\" size=\"5\" readonly>";
objNuevaFila.childNodes[2].innerHTML = "<select name =\"Columna3."+l+"\" onchange=\"Columna2"+l+"\".value = this.value><option value=\"26\">Objeto1</option><option value=\"6\">Objeto2</option><option value=\"61\">Objeto3</option><option value=\"17\">Objeto4</option><option value=\"81\">Objeto5</option><option value=\"62\">Objeto6</option><option value=\"18\">Objeto7</option></select>";

objTbody.appendChild(objNuevaFila);
objTbody.childNodes[l-2].childNodes[3].innerHTML = "&nbsp;";
document.getElementById("numFilas").value = l;

l++;
}
</script>

<style type="text/css">
<!--
.Estilo41 {color: #FFFFFF}
.Estilo41 {color: #FFFFFF}
-->
</style>
</head>

<body>
<form name="pepito" id="pepito">
<tr>
<td><p>&nbsp;</p>
<table id="tabla" width="22%" border="1">
<tr bgcolor="#000066">
<td width="29%"><div align="center"><span class="Estilo41">Col 1 </span></div></td>
<td width="24%"><div align="center"><span class="Estilo41">Col 2 </span></div></td>
<td width="47%"><div align="center"><span class="Estilo41">Col 3 </span></div></td>
</tr>
<tr>
<td><input name="columna1.1" type="text" id="IDfocoCont1" size="12" /></td>
<td><input name="columna2.1" type="text" id="N&ordm;PRTR1" size="5" readonly="readonly"/></td>
<td><select name="columna3.1" id="nomePRTR1" onchange="N&ordm;PRTR1.value = this.value" >
<option value='26' selected="selected" >Objeto1</option>
<option value='6' >Objeto2</option>
<option value='61' >Objeto3</option>
<option value='17' >Objeto4</option>
<option value='81' >Objeto5</option>
<option value='62' >Objeto6</option>
<option value='18' >Objeto7</option>
</select></td>
</tr>
</table>
<p>
<input type="button" name="compb22" value="Engadir Carga Contaminante" onclick="Prueba();" />
</p>
<p></p></td>
</tr>
</form>
</body>
</html>
  #2 (permalink)  
Antiguo 13/10/2008, 09:02
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 20 años
Puntos: 834
Respuesta: Formulario complejo... Ayuda con el código

Entre otras cosas, es una mala idea colocar puntos a los valores de los atributos name o id. Fijate si te sirve esto:
Código PHP:
<html>
<
head>
<
script>
var 
l=2;

function 
Prueba(){
var 
objTabla document.getElementById("tabla");
var 
objTbody=objTabla.getElementsByTagName('tbody').item(0);
var 
objNuevaFila=objTbody.getElementsByTagName('tr').item(1).cloneNode(true);

//cambiamos el contenido de las celdas
objNuevaFila.getElementsByTagName('td').item(0).innerHTML "<input id=\"Columna1"+l+"\" type =\"text\" name=\"Columna1"+l+"\" size=\"12\">";
objNuevaFila.getElementsByTagName('td').item(1).innerHTML "<input id=\"Columna2"+l+"\" type =\"text\" name=\"Columna2"+l+"\" size=\"5\" readonly>";
objNuevaFila.getElementsByTagName('td').item(2).innerHTML "<select id=\"Columna3"+l+"\" name=\"Columna3"+l+"\" onchange=\"Columna2"+l+".value = this.value\"><option value=\"26\">Objeto1</option><option value=\"6\">Objeto2</option><option value=\"61\">Objeto3</option><option value=\"17\">Objeto4</option><option value=\"81\">Objeto5</option><option value=\"62\">Objeto6</option><option value=\"18\">Objeto7</option></select>";

objTbody.appendChild(objNuevaFila);

l++;
}
</script>

<style type="text/css">
<!--
.Estilo41 {color: #FFFFFF}
.Estilo41 {color: #FFFFFF}
-->
</style>
</head>

<body>
<form name="pepito" id="pepito">
<table id="tabla" width="22%" border="1">
<tbody>
<tr bgcolor="#000066">
<td width="29%"><div align="center"><span class="Estilo41">Col 1 </span></div></td>
<td width="24%"><div align="center"><span class="Estilo41">Col 2 </span></div></td>
<td width="47%"><div align="center"><span class="Estilo41">Col 3 </span></div></td>
</tr>
<tr>
<td><input name="columna11" type="text" id="IDfocoCont1" size="12" /></td>
<td><input name="columna21" type="text" id="N&ordm;PRTR1" size="5" readonly="readonly"/></td>
<td><select name="columna31" id="nomePRTR1" onchange="N&ordm;PRTR1.value = this.value" >
<option value='26' selected="selected" >Objeto1</option>
<option value='6' >Objeto2</option>
<option value='61' >Objeto3</option>
<option value='17' >Objeto4</option>
<option value='81' >Objeto5</option>
<option value='62' >Objeto6</option>
<option value='18' >Objeto7</option>
</select></td>
</tr>
</tbody>
</table>
<p>
<input type="button" name="compb22" value="Engadir Carga Contaminante" onclick="Prueba();" />
</p>
<p></p>
</form>
</body>
</html> 
  #3 (permalink)  
Antiguo 13/10/2008, 09:11
Avatar de glmarzoa  
Fecha de Ingreso: octubre-2008
Mensajes: 7
Antigüedad: 15 años, 6 meses
Puntos: 0
Respuesta: Formulario complejo... Ayuda con el código

Muchísimas gracias! Lo de los puntos fue un error, es que lo hice rapido como ejemplo, cambiando los nombres de las cosas y puse solo 7 elementos, cuando en realidad son unos ciento y pico

Funciona bien, el problema es que claro, para el "objeto 1", es decir, el primer elemento del select, aunque se seleccione, no se pone el valor directamente, si no que hay que poner otro, y después poner el primer valor...

Abusando un poquito de tus conocimientos... como podría solucionar esto??

De nuevo, mil gracias!!
  #4 (permalink)  
Antiguo 13/10/2008, 09:49
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 20 años
Puntos: 834
Respuesta: Formulario complejo... Ayuda con el código

Bueno, es más una duda de html que de javascript, no? Una solución sencilla:
Código PHP:
<html>
<
head>
<
script>
var 
l=2;

function 
Prueba(){
var 
objTabla document.getElementById("tabla");
var 
objTbody=objTabla.getElementsByTagName('tbody').item(0);
var 
objNuevaFila=objTbody.getElementsByTagName('tr').item(1).cloneNode(true);

//cambiamos el contenido de las celdas
objNuevaFila.getElementsByTagName('td').item(0).innerHTML "<input id=\"Columna1"+l+"\" type =\"text\" name=\"Columna1"+l+"\" size=\"12\">";
objNuevaFila.getElementsByTagName('td').item(1).innerHTML "<input value=\"26\" id=\"Columna2"+l+"\" type =\"text\" name=\"Columna2"+l+"\" size=\"5\" readonly>";
objNuevaFila.getElementsByTagName('td').item(2).innerHTML "<select id=\"Columna3"+l+"\" name=\"Columna3"+l+"\" onchange=\"Columna2"+l+".value = this.value\"><option value=\"26\">Objeto1</option><option value=\"6\">Objeto2</option><option value=\"61\">Objeto3</option><option value=\"17\">Objeto4</option><option value=\"81\">Objeto5</option><option value=\"62\">Objeto6</option><option value=\"18\">Objeto7</option></select>";

objTbody.appendChild(objNuevaFila);

l++;
}
</script>

<style type="text/css">
<!--
.Estilo41 {color: #FFFFFF}
.Estilo41 {color: #FFFFFF}
-->
</style>
</head>

<body>
<form name="pepito" id="pepito">
<table id="tabla" width="22%" border="1">
<tbody>
<tr bgcolor="#000066">
<td width="29%"><div align="center"><span class="Estilo41">Col 1 </span></div></td>
<td width="24%"><div align="center"><span class="Estilo41">Col 2 </span></div></td>
<td width="47%"><div align="center"><span class="Estilo41">Col 3 </span></div></td>
</tr>
<tr>
<td><input name="columna11" type="text" id="IDfocoCont1" size="12" /></td>
<td><input value="26" name="columna21" type="text" id="N&ordm;PRTR1" size="5" readonly="readonly"/></td>
<td><select name="columna31" id="nomePRTR1" onchange="N&ordm;PRTR1.value = this.value" >
<option value='26' selected="selected" >Objeto1</option>
<option value='6' >Objeto2</option>
<option value='61' >Objeto3</option>
<option value='17' >Objeto4</option>
<option value='81' >Objeto5</option>
<option value='62' >Objeto6</option>
<option value='18' >Objeto7</option>
</select></td>
</tr>
</tbody>
</table>
<p>
<input type="button" name="compb22" value="Engadir Carga Contaminante" onClick="Prueba();" />
</p>
<p></p>
</form>
</body>
</html> 
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




La zona horaria es GMT -6. Ahora son las 16:49.