Problema con funcion en inputs

[Rro_237]

Primero que todo un saludo a la comunidad.
Por estos dias he estado realizando un programa y tengo problema con un codigo js (con php).

Código:

function totalizar(){
var total=0;

for (i=0; i<document.forms[0].elements.length; i++) { 
total = total + document.forms[0].mon[i].value;
}						
document.form1.total.value=parseInt(total.value);
}

Este control corresponde al monto y esta en un ciclo.

Código:

<input name="mon<?php echo $rs['id_rec'];?>" type="text" size="6" style="text-align:right;" value="<?php echo $monto;?>" onKeyUp="totalizar()"/>

Lo que quiero es que cuando se actualice el valor de un monto modifique el total en una casilla totalizadora en la parte inferior del formulario.

Código:

<input name="total" type="text" id="total" value="<?php echo $total;?>" size="6" />

El codigo que poseo no funciona debido a alguna razon, espero puedan ayudarme, de antemano muchas gracias.

[maycolalvarez]

cuando y donde ejecutas el código js?, si el DOM no está debidamente cargado no funcionará ya que JS no obtendrá sino ceros para realizar los cálculos, incluso aún no recorrerá nada porque como dije el DOM no se ha cargado todavía, podrías ejecutar el script en el evento onload del body o utilizar jQuery para forzar la ejecución de un bloque de código una vez cargado el DOM

[zerokilled]

• primero, no te funciona porque las referencias a los inputs en el codigo no son correcta. es decir, en HTML aparece como mon[0], mon[1], mon[2], etc. pero en javascript, la referencia document.forms[0].mon[i].value; se considera como si fuera una coleccion de elementos donde los campos se llaman mon (fijate que no tiene las llaves []).
  
• segundo, estas recorriendo los elementos segun la cantidad de controles presente en el formulario. a lo que me refiero es a lo siguiente.
  Código:

  for (i=0; i<document.forms[0].elements.length; i++) {  

  elements representa todos los controles de fomulario (botones, selects, radios, checkbox, textbox, textarea). tu codigo puede presentar problema si el formulario contiene otros controles aparte de los textbox.
  
• y tercero, antes de hacer la suma debes convertir el valor a tipo numerico porque los valores de todos los controles siempre se consideran tipo string. por ende, cuando uno de los operando de la operacion suma es un string, en realidad se concatenan en lugar de sumarse.

[Rro_237]

Iniciado por zerokilled

• primero, no te funciona porque las referencias a los inputs en el codigo no son correcta. es decir, en HTML aparece como mon[0], mon[1], mon[2], etc. pero en javascript, la referencia document.forms[0].mon[i].value; se considera como si fuera una coleccion de elementos donde los campos se llaman mon (fijate que no tiene las llaves []).
  
• segundo, estas recorriendo los elementos segun la cantidad de controles presente en el formulario. a lo que me refiero es a lo siguiente.
  Código:

  for (i=0; i<document.forms[0].elements.length; i++) {  

  elements representa todos los controles de fomulario (botones, selects, radios, checkbox, textbox, textarea). tu codigo puede presentar problema si el formulario contiene otros controles aparte de los textbox.
  
• y tercero, antes de hacer la suma debes convertir el valor a tipo numerico porque los valores de todos los controles siempre se consideran tipo string. por ende, cuando uno de los operando de la operacion suma es un string, en realidad se concatenan en lugar de sumarse.

¿Cómo lo hago entonces para recorrer (en el for) solo el control que requiero para obtener los datos? ¿Y como hago para recoger aquellos datos y efectuar los calculos respectivos?

[zerokilled]

se me ocurren dos formas. pero antes, no comprendo si la razon de nombrar los INPUTs al estilo arrays es para recibir un array en php. si es el caso, lo unico que necesitas hacer es asignarle el mismo nombre a todos los campos y al final agregarle los corchetes []. luego en javascript es cuestion de tomar la referencia de todos los elementos por ese nombre y recorrerlo. en DOM, cuando mas de un elemento comparte el mismo valor en el atributo name se crea una coleccion de elementos el cual puedes recorrerlo por indices.

Código:

...
// asumiendo que todos los campos se llaman mon[];
for (i=0; document.forms[0]['mon[]'][i]; i++) { 
total = total + Number(document.forms[0]['mon[]'][i].value);
}						
...

si el proposito de nombrar los campos de forma secuencial es otra, puedes ubicar todos los campos en un elemento contenedor, tomar la referencia de ese campo, e invocar getElementsByTagName desde dicho elemento para capturar todos los INPUTs. hasta cierto punto es parecido a la alternativa anterior.

Código:

...
// #contenedor es el elemento que contiene todos los INPUTs;
var inputs = document.getElementById("contenedor").getElementsByTagName("input");
for (i=0; inputs[i]; i++) { 
total = total + Number(inputs[i].value);
}
...

[Rro_237]

Esta excelente lo que has planteado zerokilled.

Para que entiendas el contexto, lo que tengo es un formulario con muchos controles que son presentados dinamicamente, pero solo necesito trabajar con una columna, que es el monto.

Cada casilla monto tiene una funcion, el cual trabaja con el evento onKeyUp, es decir, cuando se modifica cualquier casilla de monto, el totalizador refleje ese cambio, es decir, totalice a partir del cambio que se efectuó en la casilla en cuestion.

Ojalá me halla explicado bien...