Sumar decimales

jenqu · #1 (**permalink**) 04/01/2007, 09:29

Bueno, ya sé que se ha hablado algunas veces sobre este tema, de hecho llevo un par de días buscando cómo hacer lo que yo quiero... y no sé si es porque no encuentro exactamente lo que quiero o porque he hecho cuatro cosillas en javascript, pero tengo un lío...

Mi problema es que tengo un formulario en el que en varios campos te texto aparecen valores numéricos con dos decimales. Aparecen según el formato europeo, con "," para los decimales y "." para los miles, y quiero que siga apareciendo así.
Al final tengo un botón que suma esos valores llamando a una function calcular(). Lógicamente, no me suma bien los decimales, porque ya he leido que en javascript las "," son los miles y los "." son los decimales. Es decir, que necesito que al pinchar en el botón, se ejecute una función que me sume bien los valores, pero sin tener que modificarlos en los campos del formulario (que segirán estando en formato europeo).

Uf, no sé si me explico, os pongo la función que tengo para calcular la suma, supongo que lo hace mal por lo del lío de los puntos y las comas, pero si me suma 4,56 + 2,33 el resultado es simplemente 6, es decir, que no tiene en cuenta para nada lo que está detrás de la coma.

<script language="JavaScript">
function calcular(){
var total_pvd;
total_pvd= parseFloat(document.f1.pvd.value) + parseFloat(document.f1.pvd_cuna_cables.value) + parseFloat(document.f1.pvd_batlarga.value) + parseFloat(document.f1.pvd_cargador.value) + parseFloat(document.f1.pvd_funda.value) + parseFloat(document.f1.pvd_empunadura.value) + parseFloat(document.f1.pvd_protector.value);
document.f1.pvd_total.value=parseFloat(total_pvd);
}
</script>

Bueno, espero que me podais ayudar porque estoy un poco verde, la verdad. Muchas gracias por adelantado.

KarlanKas · #2 (**permalink**) 04/01/2007, 17:10

Dime si esto te serviría:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>Untitled</title>
<style>
.texto{
text-align:right;
font:normal 12px/12px 'courier new';
border:solid 1px black;
}
</style>
<script>
function sumar(){
campos=['pvd_batlarga','pvd_funda','pvd_protector'];
f=document.forms['f1'];
total=0;
g="";
anterior=0;
d=0;
for(a=0;a<campos.length;a++){
c=f[campos[a]].value;
c=c.split(".").join("");
c=c.split(",").join(".");
total+=parseFloat(c);
}

partes=String(total).split(".");
cifras=partes[0].length;
enteros=partes[0];
decimales=partes[1];
primerPunto=cifras%3;
primerPunto=(primerPunto==0)?3:primerPunto;
for(ff=primerPunto;ff<=cifras;ff+=3){
g+=enteros.substring(anterior,ff)+".";
anterior=ff;
}
pepe=g.substring(0,g.length-1)+","+decimales;
f['total_pvd'].value=pepe;

}
</script>
</head>

<body>
<form name="f1">
<input class="texto" type="Text" value="1.100.123,12" name="pvd_batlarga"><br />
<input class="texto" type="Text" value="123.000,23" name="pvd_funda"><br />
<input class="texto" type="Text" value="1.000,22" name="pvd_protector"><br />
================&nbsp; <input type="button" value="sumar" onclick="sumar()"><br />
<input class="texto" type="Text" name="total_pvd"><br />
</form>


</body>
</html>

Un saludo!

BLAH !! · #3 (**permalink**) 04/01/2007, 18:52

hola ... yo lo he probado y funciona .. pero tiene algunos problemas (derrepente) con algunas sumas de decimales.... ya que por ejemplo si la suma es

1.000.100,22
123.000,1 +
1.000,543
------------------
1.124.100,8630000001 -----> por qué tantos decimales???

lo otro ... no se si bueno o malo pero acepta números con o sin separador de miles ...

Esos fueron mis aportes xD
jijijijij

Adios.- !!!

jenqu · #4 (**permalink**) 05/01/2007, 03:13

Muchas gracias karlankas! Vaya peazo de script, la verdad es que la mayoría ni lo entiendo, jeje, pero me pasa una cosa, que así solamente como lo has puesto funciona perfectamente, pero lo adapto a mi página y no sale ningún resultado cuando le doy al botón...

A ver, a mi botón le he añadido la acción onClick correctamente, después he modificado los campos creo que también correctamente... Es decir, he añadido los nombres de los demás que tengo yo, y todo lo demás lo he dejado como está, no sé que me falta... Tampoco quiero tocar nada más porque ya te digo que es bastante avanzado para mí y no pillo muchas cosas...

A lo mejor interfiere con alguna cosa más que tengo en mi pagina? Al principio del formulario tengo un combobox que recoge los valores de una base de datos (con ASP), y después están los campos de texto que muestran los precios también desde esa base de datos. Pero estos precios solo se muestran si se hace click en su checkbox correspondiente (llama a otra funcion que carga el value). La cosa es que con la funcion que yo tenía me mostraba el precio (aunque sin los decimales) y no tengo ni idea de por qué no funciona ahora...

En fin, siento marearte, y muchas gracias otra vez.

KarlanKas · #5 (**permalink**) 05/01/2007, 03:53

Es normal que surja algún problemilla con la implementación.

A ver si el problema va a ser por alguno de estos motivos:

en el array campos metemos los nombres de los campos que queremos sumar:

campos=['pvd_batlarga','pvd_funda','pvd_protector'];

Como ves están entre comillas y separados por comas. Pon ahí los nombres de los campos que quieres sumar.

f es la variable que contiene el formulario:

f=document.forms['f1'];

lo que ves como f1 es el name que he creido que tenía tu formulario. Si el name es otro cambialo por ese. Por ejemplo, si el form es:

<form name="pepe" action="destino.asp"...

pues debes poner:

f=document.forms['pepe'];

Y por último el campo donde quieres que se muestre el resultado de la suma es este:

f['total_pvd'].value=pepe;

es decir, se llama total_pvd. Si el name es otro pues debes cambiarlo por el name que sea.

Prueba a hacer esos cambios y si te sigue fallando manda la dirección donde lo podemos ver o copia y pega el códgo que muestra el navegador al visualizar la página (no el código asp sino el código que aparece al cargar la página).

Confío en que ahora te funcione, pero si no es así sigue preguntando que para eso estamos.

Un saludo!

KarlanKas · #6 (**permalink**) 05/01/2007, 04:04

He modificado el script para que sea más fácil de configurar, he corregido el fallo que comentaba BLAH (gracias!) y he explicado un poco el código para que te sea más comprensible. Dime si ahora te es más fácil:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>Untitled</title>
<style>
.texto{
text-align:right;
font:normal 12px/12px 'courier new';
border:solid 1px black;
}
</style>
<script>
function sumar(){

campos=['pvd_batlarga','pvd_funda','pvd_protector']; //Pon aquí entre comillas y separados por comas los campos a sumar.
name_del_formulario="f1"; //Pon aquí el name del formulario
name_del_total="total_pvd"; //Pon aquí el name del campo en el que vas a poner el total

// No editar a partir de aquí si no sabes lo que haces

f=document.forms[name_del_formulario];
total=0;
g="";
anterior=0;

//Quitamos los puntos, las comas las cambiamos por puntos y sumamos los campos.
for(a=0;a<campos.length;a++){
	c=f[campos[a]].value;
	c=c.split(".").join("");
	c=c.split(",").join(".");
	total+=parseFloat(c);
}

//separamos los enteros de los decimales
partes=String(total).split(".");
cifras=partes[0].length;
enteros=partes[0];
decimales=partes[1];
decimales=String(decimales).substring(0,2); //para corregir que salgan más de dos decimales

//Averiguamos dónde poner el primer punto
primerPunto=cifras%3;
primerPunto=(primerPunto==0)?3:primerPunto;


//Colocamos los puntos de miles
for(ff=primerPunto;ff<=cifras;ff+=3){
	g+=enteros.substring(anterior,ff)+".";
	anterior=ff;
}
//unimos enteros y decimales
pepe=g.substring(0,g.length-1)+","+decimales;

//Ponemos el resultado
f[name_del_total].value=pepe;

}
</script>
</head>

<body>
<form name="f1">
<input class="texto" type="Text" value="1.100.123,12" name="pvd_batlarga"><br />
<input class="texto" type="Text" value="123.000,23" name="pvd_funda"><br />
<input class="texto" type="Text" value="1.000,22" name="pvd_protector"><br />
================&nbsp; <input type="button" value="sumar" onclick="sumar()"><br />
<input class="texto" type="Text" name="total_pvd"><br />
</form>


</body>
</html>

Un saludo!

jenqu · #7 (**permalink**) 05/01/2007, 04:18

Ahora siiiiiii! Gracias! resulta que el name de la suma no era total_pvd, sino pvd_total... y claro, yo venga a mirar y no me daba cuenta, jajaja, que tonta.

Lo malo es que falla alguna cosilla aún, como por ejemplo, cuando el total de la suma es 1.345,00 aparece "1.345,undefined". Es decir, que ocurre eso cuando los decimales son 00.

Y también me pasa que si no selecciono todos los campos, es decir, si me dejo alguno sin darle al checbox, aparece "NaN, undefined". Que es eso de NaN? Porque me suena y no encuentro nada en mis apuntes... Madre mía, que desfasada estoy...

KarlanKas · #8 (**permalink**) 05/01/2007, 04:33

Eso te lo arreglo en un pispas NaN significa Not a Number (es decir dice que no es un número y por tanto no puede operar con él).

Ahora te lo pongo con los arreglos.

KarlanKas · #9 (**permalink**) 05/01/2007, 04:39

Listo!

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>Untitled</title>
<style>
.texto{
text-align:right;
font:normal 12px/12px 'courier new';
border:solid 1px black;
}
</style>
<script>
function sumar(){
campos=['pvd_batlarga','pvd_funda','pvd_protector']; //Pon aquí entre comillas y separados por comas los campos a sumar.
name_del_formulario="f1";
name_del_total="total_pvd";



f=document.forms[name_del_formulario];
total=0;
g="";
anterior=0;

//Quitamos los puntos, las comas las cambiamos por puntos y sumamos los campos.
for(a=0;a<campos.length;a++){
	c=f[campos[a]].value;
	if(c!=""){ //solo suma si hay algo en el campo.
	c=c.split(".").join("");
	c=c.split(",").join(".");
	total+=parseFloat(c);
	}
}

//separamos los enteros de los decimales
partes=String(total).split(".");
cifras=partes[0].length;
enteros=partes[0];
decimales=partes[1];

decimales=(decimales!=null)?String(decimales).substring(0,2):"00"; //para corregir que salgan más de dos decimales y para quitar el feo undefined
if(decimales.length<2){
decimales+="0";
}

//Averiguamos dónde poner el primer punto
primerPunto=cifras%3;
primerPunto=(primerPunto==0)?3:primerPunto;


//Colocamos los puntos de miles
for(ff=primerPunto;ff<=cifras;ff+=3){
	g+=enteros.substring(anterior,ff)+".";
	anterior=ff;
}
//unimos enteros y decimales
pepe=g.substring(0,g.length-1)+","+decimales;

//Ponemos el resultado
f[name_del_total].value=pepe;

}
</script>
</head>

<body>
<form name="f1">
<input class="texto" type="Text" value="1.100.123,12" name="pvd_batlarga"><br />
<input class="texto" type="Text" value="123.000,23" name="pvd_funda"><br />
<input class="texto" type="Text" value="1.000,22" name="pvd_protector"><br />
================&nbsp; <input type="button" value="sumar" onclick="sumar()"><br />
<input class="texto" type="Text" name="total_pvd"><br />
</form>


</body>
</html>

Si tienes más dudas pregunta!

jenqu · #10 (**permalink**) 05/01/2007, 05:36

Perfecto!! oye, estoy alucinando, porque me has hecho el script enterito, ya me dirás cuanto te debo, me estoy sintiendo hasta mal....

Ya solo me queda un detallito, conseguir el pvp (que es el resultado del pvd dividido entre 0,7). Ese sale en otro campo que se llama pvp_total. me he aventurado y he hecho algunas pruebas, pero me sale NaN otra vez (que manía).

A ver, lo que he hecho es cambiar arriba las variables y he puesto:
name_del_pvdtotal="pvd_total";
name_del_pvptotal="pvp_total";

y al final del todo he puesto:
f[name_del_pvdtotal].value=pepe;
f[name_del_pvptotal].value=(pepe)/(10/7);

Pero supongo que era mucho pedir para mí... A ver si después de la pista consigo mostrar el pvp + el iva en otro campo, que eso ya me daría mucha vergüenza...

KarlanKas · #11 (**permalink**) 05/01/2007, 06:25

A ver que te parece así:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>Untitled</title>
<style>
.texto{
text-align:right;
font:normal 12px/12px 'courier new';
border:solid 1px black;
}
</style>
<script>

function sumar(){
campos=['pvd_batlarga','pvd_funda','pvd_protector']; //Pon aquí entre comillas y separados por comas los campos a sumar.
name_del_formulario="f1";
name_del_total="total_pvd";
name_del_total_con_IVA="total_pdv_iva";


f=document.forms[name_del_formulario];
total=0;


//Quitamos los puntos, las comas las cambiamos por puntos y sumamos los campos.
for(a=0;a<campos.length;a++){
	c=f[campos[a]].value;
	if(c!=""){ //solo suma si hay algo en el campo.
	c=c.split(".").join("");
	c=c.split(",").join(".");
	total+=parseFloat(c);

	}
}

totalConIVA=total/(10/7);//AQUI SE PONE COMO CALCULAR EL IVA!!

//Ponemos los resultados
f[name_del_total].value=ponerBonito(total);
f[name_del_total_con_IVA].value=ponerBonito(totalConIVA);
}


function ponerBonito(esto){
pepe=0;
g="";
anterior=0;
//separamos los enteros de los decimales
partes=String(esto).split(".");
cifras=partes[0].length;
enteros=partes[0];
decimales=partes[1];

decimales=(decimales!=null)?String(decimales).substring(0,2):"00"; //para corregir que salgan más de dos decimales y para quitar el feo undefined
if(decimales.length<2){
decimales+="0";
}

//Averiguamos dónde poner el primer punto
primerPunto=cifras%3;
primerPunto=(primerPunto==0)?3:primerPunto;


//Colocamos los puntos de miles
for(ff=primerPunto;ff<=cifras;ff+=3){
	g+=enteros.substring(anterior,ff)+".";
	anterior=ff;
}
//unimos enteros y decimales
pepe=g.substring(0,g.length-1)+","+decimales;
return pepe;
}
</script>
</head>

<body>
<form name="f1">
<input class="texto" type="Text" value="1.100.123,12" name="pvd_batlarga"><br />
<input class="texto" type="Text" value="123.000,23" name="pvd_funda"><br />
<input class="texto" type="Text" value="1.000,22" name="pvd_protector"><br />
================&nbsp; <input type="button" value="sumar" onclick="sumar()"><br />
<input class="texto" type="Text" name="total_pvd"><br />
<input class="texto" type="Text" name="total_pdv_iva"><br />
</form>


</body>
</html>

Espero que te sirva ahora. El script ha cambiado bastante. Copialo entero...

BLAH !! · #12 (**permalink**) 05/01/2007, 08:05

;) muy bien !!!

Muy bueno KarlanKas !!!

Adios.-

jenqu · #13 (**permalink**) 05/01/2007, 09:17

Muchíiiiiisimas gracias! Ahora ya está perfecto! Bueno, como para haberlo sacado yo sola, madre mía que chungo, jeje.
Mil gracias de nuevo

KarlanKas · #14 (**permalink**) 07/01/2007, 17:41

Me alegro de que te funcione bien!

Un saludo!

derkenuke · #15 (**permalink**) 07/01/2007, 19:59

A ver si os gusta el lío ilegible que me he montado para hacer el script rápido, confuso, y de pocas líneas

:

Código PHP:

  var nos=["4.532,234","55,56002","541.867,078"];

function formato_PC(n) {
    return Number( n.replace(/./g,"").replace(/,/g,".") );
}
function formato_HUM(n) {
    n=String(n).split(".");        //el entero es n[0] y la parte decimal es n[1]
    n[0]=n[0].split("").reverse().join("");        //le damos la vuelta, asi podemos tocarlo desde atras sin complicaciones
    n[0]=n[0].replace(/(d{3})(?=d)/g,"$1.");        
    //ver comentario abajo
    n[0]=n[0].split("").reverse().join("");        //lo reestablecemos a su orden original
    return n.join(",");        //unimos la parte entera con la decimal
}

function suma(arr) {
    var total=0;
    for(var i=0;i<arr.length;i++)
        total+=formato_PC(arr[i]);
    return formato_HUM(total);
}

document.write( suma(nos) );

El comentario es:

coincide con 3 digitos seguidos solo si estan seguidos de otro digito y lo sustituímos por los tres digitos con un punto (evitamos el punto al final de la cadena. Ejemplo: Si el numero original es 123456, al darle la vuelta sera 654321: buscamos ocurrencias de 3 numeros solo si estan seguidas de otro numero, es decir, encontramos 654 porque le sigue un 3, y no encontramos 321 porque no hay ningun numero detras, evitando como resultado "654.321." que al hacer el reverse seria ".123.456" y no "123.456"

Lo que se traduciría en nuestra página si alguien quiere por:

Código PHP:

  var nos=["4.532,234","55,56002","541.867,078"];

function suma(arr) {
    for(var i=0, total=0; i<arr.length; i++) 
        total+=Number( arr[i].replace(/./g,"").replace(/,/g,".") );
    total=String(total).split(".");    
    total[0]=total[0].split("").reverse().join("").replace(/(d{3})(?=d)/g,"$1.").split("").reverse().join("");
    return total.join(",");
}

document.write( suma(nos) );

5 líneas dentro de nuestra función.

AVISO: Todas las letras d dentro de las expresiones regulares tienen una contrabarra delante suyo, el sistema del foro impide que salgan. Son \d todas.
total[0]=total[0].split("").reverse().join("").replace(/(\d{3})(?=\d)/g,"$1.").split("").reverse().join("");

Editado: : Se me olvidó decir que hay una contrabarra delante del punto que el sistema del foro tampoco muestra, es:
total+=Number( arr[i].replace(/\./g,"").replace(/\,/g,".") );

Que nadie se mosquee, sólo me aburro un poco y quería ponerme como reto personal reducir un poco el script y acordarme de las expresiones regulares. Pero me ha quedado elegante, ¿no? La potencia de las expresiones regulares...

Un saludo a todos.

KarlanKas · #16 (**permalink**) 08/01/2007, 02:14

Toda mejora sobre el script es bienvenida, derkenuke. Realmente el uso de expresiones regulares reduce el script.

Un saludo!