[SOLUCIONADO] Calcular valor medio de cinco textbox

[angel_dope]

Hola, tengo una formulario donde, entre otras cosas, el usuario rellena cinco campos con valores numéricos y quiero que a medida que los ponga, en otro campo del formulario le vaya saliendo la media de esos campos. Los campos van el siguiente trozo de código:

Código HTML:

<table width="947" border="0">
    <tr>
      <th width="171" bgcolor="#C78A0D" scope="col"><span class="Estilo1">Mediciones (mm) </span></th>
      <th width="187" bgcolor="#C78A0D" scope="col"><span class="Estilo1">Medida 1 </span></th>
      <th width="197" bgcolor="#C78A0D" scope="col"><span class="Estilo1">Medida 2 </span></th>
      <th width="187" bgcolor="#C78A0D" scope="col"><span class="Estilo1">Medida 3 </span></th>
      <th width="84" bgcolor="#C78A0D" scope="col"><span class="Estilo1">Medida 4 </span></th>
      <th width="85" bgcolor="#C78A0D" scope="col"><span class="Estilo1">Medida 5 </span></th>
    </tr>
    <tr>
      <td><strong>Fuerza (N)</strong></td>
      <td align="center" valign="middle"><input name="T3-m1-9999" type="text" class="meta" id="T3-m1-9999" /></td>
      <td align="center" valign="middle"><input name="T3-m2-9999" type="text" class="meta" id="T3-m2-9999" /></td>
      <td align="center" valign="middle"><input name="T3-m3-9999" type="text" class="meta" id="T3-m3-9999" /></td>
      <td align="center" valign="middle"><input name="T3-m4-9999" type="text" class="meta" id="T3-m4-9999" /></td>
      <td align="center" valign="middle"><input name="T3-m5-9999" type="text" class="meta" id="T3-m5-9999" /></td>
    </tr>
  </table>
  <p><br />
    Valor medio F =
      <input name="T3-media-202" type="text" class="meta" id="T3-media-202" readonly="yes" /> 
      N </p>
 

El usuario iría rellenando los campos T3-m1-9999, T3-m2-9999... y el valor medio le iría saliendo en el campo T3-media-202. Me daría igual que al calcular se dividiese siempre entre cinco, y no entre el número real de campos rellenados, ya que siempre tendrán que rellenarlos todos.

La verdad es que no tengo ni idea de como hacerlo. Imagino que será con un onchange de cada campo, que llame a la función que calcule la media, pero no le tengo nada claro.

Muchas gracias por adelantado, Salu2

[maycolalvarez]

en efecto, es así, define una función para calcular y llámala en en onchange u onblur de cada input

[angel_dope]

El problema es que no tengo ni idea de como hacerlo. Ayer estuve probando, pero no iba de ninguna manera :( es el problema de no tener apenas idea de Javascript.
¿Algunas indicaciones de como hacerlo, por favor?

Salu2

[ccliment]

Lo que tienes que hacer es en el onkeyup de cualquier input llamar a una función que revise los 5 inputs y así puedes obtener la media. Lo puedes hacer en otros eventos como onblur, pero eso ya depende de lo que quieras. Con lo que te pego a continuación he descartado los inputs que estén vacíos o que no sean valores enteros.

Código HTML:

<script>
    function calcularMedia(){
        var suma = 0, num = 0;
        var valor = document.getElementById('T3-m1-9999').value;
        if (parseInt(valor, 10)){
            suma+= parseInt(valor,10);
            num++;
        }
        valor = document.getElementById('T3-m2-9999').value;
        if (parseInt(valor, 10)){
            suma+= parseInt(valor,10);
            num++;
        }
        valor = document.getElementById('T3-m3-9999').value;
        if (parseInt(valor, 10)){
            suma+= parseInt(valor,10);
            num++;
        }
        valor = document.getElementById('T3-m4-9999').value;
        if (parseInt(valor, 10)){
            suma+= parseInt(valor,10);
            num++;
        }
        valor = document.getElementById('T3-m5-9999').value;
        if (parseInt(valor, 10)){
            suma+= parseInt(valor,10);
            num++;
        }
 
        // Calculamos la media
        var media = suma/num;
        document.getElementById('T3-media-202').value = media;
    }
</script>
<table width="947" border="0">
    <tr>
      <th width="171" bgcolor="#C78A0D" scope="col"><span class="Estilo1">Mediciones (mm) </span></th>
      <th width="187" bgcolor="#C78A0D" scope="col"><span class="Estilo1">Medida 1 </span></th>
      <th width="197" bgcolor="#C78A0D" scope="col"><span class="Estilo1">Medida 2 </span></th>
      <th width="187" bgcolor="#C78A0D" scope="col"><span class="Estilo1">Medida 3 </span></th>
      <th width="84" bgcolor="#C78A0D" scope="col"><span class="Estilo1">Medida 4 </span></th>
      <th width="85" bgcolor="#C78A0D" scope="col"><span class="Estilo1">Medida 5 </span></th>
    </tr>
    <tr>
      <td><strong>Fuerza (N)</strong></td>
      <td align="center" valign="middle"><input name="T3-m1-9999" type="text" class="meta" id="T3-m1-9999" onkeyup="calcularMedia();"/></td>
      <td align="center" valign="middle"><input name="T3-m2-9999" type="text" class="meta" id="T3-m2-9999" onkeyup="calcularMedia();"/></td>
      <td align="center" valign="middle"><input name="T3-m3-9999" type="text" class="meta" id="T3-m3-9999" onkeyup="calcularMedia();"/></td>
      <td align="center" valign="middle"><input name="T3-m4-9999" type="text" class="meta" id="T3-m4-9999" onkeyup="calcularMedia();"/></td>
      <td align="center" valign="middle"><input name="T3-m5-9999" type="text" class="meta" id="T3-m5-9999" onkeyup="calcularMedia();"/></td>
    </tr>
  </table>
  <p><br />
    Valor medio F =
      <input name="T3-media-202" type="text" class="meta" id="T3-media-202" readonly="yes" />
      N </p>
 

[angel_dope]

Perfecto, funciona de miedo, muchísimas gracias. Solo una duda más, ¿qué tendría que cambiar para que tuviese en cuenta también valores decimales?
Lo digo porque aun no me han confirmado si los valores serán siempre enteros o si pueden tener decimales, y en caso de tenerlos, lo tendría que tener en cuenta en el cálculo, claro.

Muchas gracias de nuevo!!! Salu2

[angel_dope]

Si antes lo pregunto, antes me lo confirman. Efectivamente, los valores llevarán decimales!! He investigado un poco, y si no me equivoco sería de la siguiente manera:

Código Javascript:

<script>
    function calcularMedia(){
        var suma = 0, num = 0;
        var valor = document.getElementById('T3-m1-9999').value;
        if (parseFloat(valor)){
            suma+= parseFloat(valor);
            num++;
        }
        valor = document.getElementById('T3-m2-9999').value;
        if (parseFloat(valor)){
            suma+= parseFloat(valor);
            num++;
        }
        valor = document.getElementById('T3-m3-9999').value;
        if (parseFloat(valor)){
            suma+= parseFloat(valor);
            num++;
        }
        valor = document.getElementById('T3-m4-9999').value;
        if (parseFloat(valor)){
            suma+= parseFloat(valor);
            num++;
        }
        valor = document.getElementById('T3-m5-9999').value;
        if (parseFloat(valor)){
            suma+= parseFloat(valor);
            num++;
        }
 
        // Calculamos la media
        var media = suma/num;
        
        document.getElementById('T3-media-202').value = parseFloat(media).toFixed(2);
    }
</script>
 

Así me tiene en cuenta los decimales, y el resultado lo muestra con solo decimales. Lo veis correcto?

[angel_dope]

Aunque se me plantea una nueva duda... de esta forma, solo me tiene en cuenta los decimales si van separados por un punto, es decir, 10.55

Hay alguna forma de que tenga en cuenta el valor si va separado por una coma? Y que el resultado lo muestre también con una coma y no con un punto?

[angel_dope]

Pues nada, ya lo tengo resuelto también después de investigar un poco más. Básicamente lo que hago es que al leer el valor del textbox, reemplazo las comas por puntos antes de hacer nada, a continuación se hacen todas las operaciones, y para finalizar, antes de mostrar el resultado vuelvo a reemplazar el punto por una coma y listo. Dejo aquí la función modificada por si a alguien le viene bien.

Código Javascript:

<script>
    function calcularMedia(){
        var suma = 0, num = 0;
        var valor = document.getElementById('T3-m1-9999').value.replace(',', '.');
        if (parseFloat(valor)){
            suma+= parseFloat(valor);
            num++;
        }
        valor = document.getElementById('T3-m2-9999').value.replace(',', '.');
        if (parseFloat(valor)){
            suma+= parseFloat(valor);
            num++;
        }
        valor = document.getElementById('T3-m3-9999').value.replace(',', '.');
        if (parseFloat(valor)){
            suma+= parseFloat(valor);
            num++;
        }
        valor = document.getElementById('T3-m4-9999').value.replace(',', '.');
        if (parseFloat(valor)){
            suma+= parseFloat(valor);
            num++;
        }
        valor = document.getElementById('T3-m5-9999').value.replace(',', '.');
        if (parseFloat(valor)){
            suma+= parseFloat(valor);
            num++;
        }
 
        // Calculamos la media
        var media = suma/num;
        media = parseFloat(media).toFixed(2);
        media = media.replace('.', ',');
        document.getElementById('T3-media-202').value = media;
    }
</script>