Cuando tienen el mismo nombre no funciona

Siho · #1 (**permalink**) 13/02/2009, 08:05

Os pongo un pequeño script que he hecho:

Código HTML:

<html>
<head>
<SCRIPT LANGUAGE=JavaScript>
function Sumar() {
var val1;
var val2;
var val3;

val1 = (! parseFloat(document.factura.lista1.value))?0:parseFloat(document.factura.lista1.value);
val1tot = val1 * document.factura.categoa.value;


val2 = (! parseFloat(document.factura.lista2.value))?0:parseFloat(document.factura.lista2.value);
val2tot = val2 * document.factura.categob.value;

val3 = (! parseFloat(document.factura.lista3.value))?0:parseFloat(document.factura.lista3.value);
val3tot = val3 * document.factura.categoc.value;


document.factura.tot.value = val1tot+val2tot+val3tot;
}
</SCRIPT>
</head>
<body>
<form name=factura>
CATEGORIA A<br>
<select name="lista1" onChange=Sumar()>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="lista1" onChange=Sumar()>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>



<BR><BR>CATEGORIA B<br>
<select name="lista2" onChange=Sumar()>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

<BR><BR>CATEGORIA C<br>
<select name="lista3" onChange=Sumar()>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br><br>TOTAL<br>
<input name=tot size=6><br><br>
Catego A <input name=categoa size=6 type='text' value="20"><br>
Catego B <input name=categob size=6 type='text' value="50"><br>
Catego C <input name=categoc size=6 type='text' value="100"></td>
</form>
</body>
</html>

Funciona bien pero claro, cuando pongo dos select con el mismo nombre dentro de una categoría deja de funcionar, ¿Hay alguna forma de evitar o corregir ésto sin tener que pasar por cambiarle el nombre?

Gracias!!

David · #2 (**permalink**) 13/02/2009, 08:33

Puedes hacer referencia al elemento específico indicando el índice. Ejemplo:
document.formulario.elemento[0] /* El primer elemento */
document.formulario.elemento[1] /* Segundo elemento */

Siho · #3 (**permalink**) 13/02/2009, 08:55

No me acaba de funcionar, debo estar haciendo algo mal..

Código HTML:

<html>
<head>
<SCRIPT LANGUAGE=JavaScript>
function Sumar() {
var val1;
var val2;
var val3;

for (i=0; i<document.factura.lista1.length; i++){
val1 = (! parseFloat(document.factura.lista1[i].value))?0:parseFloat(document.factura.lista1[i].value);
val1tot = val1 * document.factura.categoa.value;


val2 = (! parseFloat(document.factura.lista2[i].value))?0:parseFloat(document.factura.lista2[i].value);
val2tot = val2 * document.factura.categob.value;

val3 = (! parseFloat(document.factura.lista3[i].value))?0:parseFloat(document.factura.lista3[i].value);
val3tot = val3 * document.factura.categoc.value;

}
document.factura.tot.value = val1tot+val2tot+val3tot;
}
</SCRIPT>
</head>
<body>
<form name=factura>
CATEGORIA A<br>
<select name="lista1" onChange=Sumar()>
<option selected value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="lista1" onChange=Sumar()>
<option selected value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>



<BR><BR>CATEGORIA B<br>
<select name="lista2" onChange=Sumar()>
<option selected value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

<BR><BR>CATEGORIA C<br>
<select name="lista3" onChange=Sumar()>
<option selected value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br><br>TOTAL<br>
<input name=tot size=6><br><br>
Catego A <input name=categoa size=6 type='text' value="20"><br>
Catego B <input name=categob size=6 type='text' value="50"><br>
Catego C <input name=categoc size=6 type='text' value="100"></td>
</form>
</body>
</html>

David · #4 (**permalink**) 13/02/2009, 08:59

Es que lista2 y lista3 no hay varios, sólo uno de cada.

También, a cada paso del bucle estás reemplazando el valor de las variables, por lo que la suma no saldrá bien.

Siho · #5 (**permalink**) 13/02/2009, 09:13

Muchas gracias!!

Os copio el codigo ya funcionando x si a alguien le interesa:

Código:

<html>
<head>
<SCRIPT LANGUAGE=JavaScript>
function Sumar() {
var val1;
var val2;
var val3;
var val1tot2 = 0;
var val1tot;
var val2tot;
var val3tot;

for (i=0; i<document.factura.lista1.length; i++){
val1 = (! parseFloat(document.factura.lista1[i].value))?0:parseFloat(document.factura.lista1[i].value);
val1tot = val1 * document.factura.categoa.value;
val1tot2 += val1tot;


val2 = (! parseFloat(document.factura.lista2.value))?0:parseFloat(document.factura.lista2.value);
val2tot = val2 * document.factura.categob.value;

val3 = (! parseFloat(document.factura.lista3.value))?0:parseFloat(document.factura.lista3.value);
val3tot = val3 * document.factura.categoc.value;
document.factura.tot.value = val1tot2+val2tot+val3tot;
}

}
</SCRIPT>
</head>
<body>
<form name=factura>
CATEGORIA A<br>
<select name="lista1" onChange=Sumar()>
<option selected value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="lista1" onChange=Sumar()>
<option selected value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>



<BR><BR>CATEGORIA B<br>
<select name="lista2" onChange=Sumar()>
<option selected value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

<BR><BR>CATEGORIA C<br>
<select name="lista3" onChange=Sumar()>
<option selected value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br><br>TOTAL<br>
<input name=tot size=6><br><br>
Catego A <input name=categoa size=6 type='text' value="20"><br>
Catego B <input name=categob size=6 type='text' value="50"><br>
Catego C <input name=categoc size=6 type='text' value="100"></td>
</form>
</body>
</html>