Suma de Valores

KillerBKS · #1 (**permalink**) 21/10/2003, 21:11

Hola:

Necesito generar un formulario con varias casillas de texto, y dependiendo del valor que tome cada una ir mostrando su resultado en otra casilla.
Algo asi como sumar tres valores, pero que el casillero "total" vaya cambiando de acuerdo a como cambian los valores en los otros casilleros.
Creo que en Visual Basic hay una accion "onchange" pero no se si en html o algo para web se pueda hacer.

Salu2

tunait · #2 (**permalink**) 22/10/2003, 01:44

Con javascript podrás hacerlo.

Traslado tu pregunta a ese foro

movido desde html

saludos

KarlanKas · #3 (**permalink**) 22/10/2003, 06:08

Código PHP:

  <html>

<head>

<style>

input{border:none;

border-bottom:solid 1px black;

font:normal 12px/12px 'courier new';

text-align:right;

}

td{font:normal 10px verdana;

padding:0px 20px 0px 0px;}

</style>

    <title>Untitled</title>

<script>

function sumar(){

 
total=0;

for(a=0;a<3;a++){

document.forms[0].elements[a].value=document.forms[0].elements[a].value.split(",").join(".");

if (!isNaN(document.forms[0].elements[a].value)){

pepe=new Number(document.forms[0].elements[a].value);

total=total+pepe;

document.forms[0].elements["total"].value=total}

else{document.forms[0].elements[a].value=0}

}

}

</script></head>

 
 
<body><table><form action="javascript:alert('Enviando')"

 name="formularo" id="formularo">

<tr>

<td>

</td>

<td><input type="text" name="numero1" onkeyup=sumar()>

</td>

</tr>

<tr>

<td>

</td>

<td>

<input type="text" name="numero2" onkeyup=sumar()>

</td>

</tr>

 
<tr>

<td>

</td>

<td>

<input type="text" name="numero3" onkeyup=sumar()>

</td>

</tr>

 
<tr style="">

<td>TOTAL:</td>

<td>

<input type="text" readonly name="total">

</td>

</tr>

</form>

</table>

</body>

</html>

KillerBKS · #4 (**permalink**) 22/10/2003, 07:21

Disculpa KarlanKas, pero no se mucho de Javascript.
Podrias explicarme un poco mejor el codigo, o hacer una documentacion del codigo.

Gracias y Salu2

KarlanKas · #5 (**permalink**) 22/10/2003, 08:04

Si te he de ser sincero me encanta que me diagas esto. Con lo que me gusta enrollarme!!

Perdona que no te lo explicara antes pero estaba un poco liado.

La función lo que hace es recorrer los campos del formulario y va sumando los valores de los mismos para poner al final el resultado en el campo del total. La función se dispara cada vez que el puntero está en un campo del formulario y se suelta una tecla pulsada con anterioridad.

Ahora vamos por partes.

Los campos del formulario.

Estos campos no ofrecen dificultad:

Código PHP:

  <input type="text" name="numero2" onkeyup=sumar()>

Como ves está el onkeyup que dispara la función sumar() que es la encargada de realizar la suma. Por lo que cuando se suelta una tecla del teclado ejecuta la función. Javascript maneja otros eventos como onchange, onkeydown, onkeypress, onmousemove, onmouseover, onmouseout, onclick, ondoubleclick... Para este ejemplo entiendo que el mejor es onkeyup.

La función

Primero inicializamos a cero la variable total que va a ser la que nos sirva para almacenar la suma de todos los campos.

Código PHP:

  var total=0;

JS hace un Array con todos los formularios de una página y dentro de cada formulario un Array con todos sus elementos.

Así que para recorrer los 3 primeros elementos del formulario hacemos un FOR

Código PHP:

  for (a=0;a<3;a++){

y rescatamos su valor. Has de tener en cuenta que JS empieza a contar por el cero, así el primer elemento será el cero, luego el uno...

Así para comprobar el valor de uno determinado sólo tenemos que decirle que mire en el documento (document) dentro del primer formulario (forms[0]) el valor introducido del elemento "a" (elements[a].value) siendo a la variable del FOR que (obviamente) primero será 0, luego 1 y luego 2. Sería más o menos así:

Código PHP:

  document.forms[0].elements[0].value

document.forms[0].elements[1].value

document.forms[0].elements[2].value

Ahora que sabemos como rescatar el valor
lo que vamos a hacer primero es comprobar si el dato introducido tiene comas. En España es habitual separar los enteros de los decimales con comas, pero JS al ser un "invento" anglosajón separa los decimales con puntos. Así para que si le metemos comas los interprete como puntos le decimos que separe el valor del campo del formulario por las comas y que lo una con puntos (este truco es de caricatos):

Código PHP:

  document.forms[0].elements[a].value=document.forms[0].elements[a].value.split(",").join(".");

una vez que no tenemos comas en nuestro campo tenemos que comprobar si realmetne es un número y para eso se emplea la función isNaN que devuelve true si no es un número. Así aquí le estamos diciendo que si es un número (si no es un no número)que siga y si no lo es que cambie su valor por cero.

Código PHP:

  if (!isNaN(document.forms[0].elements[a].value)){

y

Código PHP:

  else{document.forms[0].elements[a].value=0

Vale, pues ya tenemos un número en formato anglosajón. Lo que nos queda es que lo tome como número y no como una cadena de texto (me vas a perdonar pero siempre uso una variable pepe):

Código PHP:

  pepe=new Number(document.forms[0].elements[a].value);

Y lo sume al total:

Código PHP:

  total=total+pepe;

Esto lo hace con cada uno de los tres campos. Por último, cuando termina el bucle el resultado de la suma se lo da como valor al campo donde debe estar el total:

Código PHP:

   
document.forms[0].elements["total"].value=total

Y esta función, como ya he dicho se dispara cada vez que sueltes una tecla estando el foco en uno de los campos del formulario.

Espero que me haya sabido explicar con la suficiente claridad. Si tienes más dudas por favor pregunta!!

KillerBKS · #6 (**permalink**) 22/10/2003, 08:23

muchas gracias.........

Que grande es este foro y grande las personas que hacen que esto funcione

Salu2

KarlanKas · #7 (**permalink**) 22/10/2003, 08:27

De nada

Qué razón tienes, yo no hago más que intentar devolver lo que otros me dieron en este foro...

KillerBKS · #8 (**permalink**) 23/10/2003, 12:09

Hola:

Ya me informaron como puedo sumar 3 valores y que el total vaya cambiando de acuerdo con el cambio que ocurra en cada casillero de texto.
Mi nueva pregunta es:
¿como puedo hacer que el valor total de esa suma no supere un valor X dado?

Ojala me ayuden

Salu2

tunait · #9 (**permalink**) 23/10/2003, 13:45

Hola KillerBKS,

He unido el nuevo tema que habías abierto con el anterior que yá tenías, dado que es la continuación de éste último y lo que pides es una modificación de lo que te sugierió KarlanKas (holaaa

).

Si abres un nuevo tema quien te lea no sabrá de qué estabas hablando.

saludos

KillerBKS · #10 (**permalink**) 23/10/2003, 14:25

ok....salu2

KillerBKS · #11 (**permalink**) 24/10/2003, 10:28

ya puuuuu KarlanKas, echame una ayudadita

Salu2

caricatos · #12 (**permalink**) 24/10/2003, 10:39

Hola KillerBKS:

Cuando vi la detallada respuesta de Karlankas (¡Hola

!) creí que no tendrías problemas en hacer pequeñas modificaciones para tus propósitos.
Voy a proponerte una sencilla modificación:

después de donde pone total = total + pepe;

if (total > maxTotal) // maxTotal debería ser ese tope
{alert("te has pasado del limite");
return;
}
else
document.forms[0].elements["total"].value=total;

Saludos

KillerBKS · #13 (**permalink**) 04/11/2003, 09:49

A alguien se le ocurre como puedo utilizar la funcion sumar, y que además no sobrepase un maximo dado, y que la cantidad de text sean dinamicos o variables (en un momento pueden ser 3 y en otro 10).

Trataré de explicarme mejor:

La idea es tener varias filas, las cuales tendran N campos de texto. Esos campos de texto se deben llenar con numeros y su suma no debe ser superior a 100. A esa suma le llamaremos "Suma Fila 1".
Entonces tendremos hasta "Suma Fila N", y la suma de todos los "Suma Fila *" tampoco debe ser mayor que 100.

Espero que se entienda bien y alguien me ayude.

Salu2

andinistas · #14 (**permalink**) 05/10/2005, 10:20

Hola!

Retomando este tema que es un poco antiguo.. tengo una inquietud y/o pregunta.

Resulta que tengo mas de 30 campos en un formulario y necesito de este script para sumar 9 campos y dar un resultado en un ultimo campo llamado total.

en la documentación o explicación del script dice;

Cita:

Así que para recorrer los 3 primeros elementos del formulario hacemos un FOR:

for (a=0;a<3;a++){

Yo he colocado

for (a=0;a<29;a++){

y el script no funciona siempre aparece un valor de 70 en el campo total, como puedo solucionar este problema?

andinistas · #15 (**permalink**) 05/10/2005, 10:22

Aclaración: se me olvido decir que los otros 20 campos no tienen nada que ver con la suma de datos, sólo 9 están en el proceso de sumar datos y mostrarlos en total

JavierB · #16 (**permalink**) 05/10/2005, 11:13

Hola andinistas

¿Puedes poner los campos que quieres sumar todos juntitos dentro de, por ejemplo, un <div>?

<div id="sumar">
<input type="text">
<input type="text">
</div>

Saludos,

andinistas · #17 (**permalink**) 05/10/2005, 12:50

no nada no funciona :o(

el script está diseñado sólo unos campos en específico, yo tengo muchos campos aparte de los de la suma automática.

huascar · #18 (**permalink**) 30/07/2007, 12:02

buenas panas del foro necesito que me ayuden con este codigo yo tengo varios campos en php por ejemplo f y los m pero tengo que dar un total de los f y de los m y el ejemplo del escript es bueno para hacerlo pero cuando hago la suma me suma todos los f y los m como hago para que me sume los f y los m y despues me de un total le agradeceria que me ayuden porfa