Suma de TextBox para mostrar Total

Huacho12 · #1 (**permalink**) 03/02/2011, 11:57

Hola a todos los foreros!!!!!!!!!

Otra vez yo aqui despues de unas pequeñas vacaciones.

El otro dia me encontro con un tema, en el cual se trataba de la suma de campos de texto para mostrar el total en otro.

Por lo que aqui dejo un ejemplo, espero pueda ser de ayuda para quines lo necesiten:

Código HTML:

<html>
<head>
<title>Sumar campos</title>[/HIGHLIGHT]

<script language="javascript"  type="text/javascript">

function sumacampos(id)
{
    //declaro variable que almacenara la suma total
    var suma = parseFloat(eval("document.getElementById('"+id+"').value")); //le asigno el valor del campo actual

//el "CampoaSumar" son los campos textBox que se sumaran
for(var i=0; i < document.form1.CampoaSumar.length; i++)
{
//Comparo el id del campo en que me encuentro para no sumarlo nuevamente y sumar los demas    
if(eval("document.getElementById('"+id+"').id") != eval("document.form1.CampoaSumar["+i+"].id") )
    {
        //Recorro el vector de los campos y realizo la suma
         suma = suma + parseFloat(eval("document.form1.CampoaSumar["+i+"].value"));
    }
 
     //Asigno la suma a un label que ira cambiando de acuerdo a la cantidad que se capture
     document.getElementById('MiLabelTOTAL').innerHTML = suma;
}


}


</script>
</head>
<body>
<form name="form1">
<input type="text" name="CampoaSumar" id="Campo1" value="0" onblur="sumacampos('Campo1');" />
<input type="text" name="CampoaSumar" id="Campo2" value="0" onblur="sumacampos('Campo2');" />
<input type="text" name="CampoaSumar" id="Campo3" value="0" onblur="sumacampos('Campo3');" />
<br/>
Total:<label id="MiLabelTOTAL" >0</label>
</form>


</body>
</html>

Este ejemplo lo e probado en IE, Firefox, Opera, Safari y GoogleCrome y si funciona.

Saludos!!!!!!!!!

SirDuque · #2 (**permalink**) 03/02/2011, 15:07

Gracias por el aporte Huacho12! seguro que nos sirve a todos!!!!

IsaBelM · #3 (**permalink**) 03/02/2011, 17:08

para que usas eval()??. prueba de esta manera

Cita:

<html>
<head>
<title>Sumar campos</title>

<script language="javascript" type="text/javascript">
var total = 0;
function sumacampos()
{

var suma = 0;

//el "CampoaSumar" son los campos textBox que se sumaran
for(var i=0, campos = document.form1; i < campos.elements.length; i++)
{

//Recorro el vector de los campos y realizo la suma
total = suma;
suma += parseFloat(campos.elements[i].value);
if (isNaN(suma)) suma = total;

}

//Asigno la suma a un label que ira cambiando de acuerdo a la cantidad que se capture
document.getElementById('MiLabelTOTAL').innerHTML = suma;

}

</script>
</head>
<body>
<form name="form1">
<input type="text" name="CampoaSumar" id="Campo1" value="0" onkeyup="sumacampos();" />
<input type="text" name="CampoaSumar" id="Campo2" value="0" onkeyup="sumacampos();" />
<input type="text" name="CampoaSumar" id="Campo3" value="0" onkeyup="sumacampos();" />
<br/>
Total:<label id="MiLabelTOTAL" >0</label>
</form>

</body>
</html>

Huacho12 · #4 (**permalink**) 04/02/2011, 09:03

Hola IsaBelM!!!

Me parece muy buena la modificacion del codigo, al igual de que usaste el isNaN() del cual no sabia, pero ya investigue como funciona

, pero asi como lo pones la funcion esta recorriendo todos los elementos del formulario asi sean textbox, checkbox o radiobuttons, los cuales si yo genero dinamicamente y les asigno digamos el id (numerico) en la propiedad value de un campo de la base de datos, tambien incluira ese valor a la suma:

Código HTML:

<html>
<head>
<title>Sumar campos</title>

<script language="javascript" type="text/javascript">
var total = 0;
function sumacampos()
{

var suma = 0;

//el "CampoaSumar" son los campos textBox que se sumaran
for(var i=0, campos = document.form1; i < campos.elements.length; i++)
{

//Recorro el vector de los campos y realizo la suma
total = suma;
suma += parseFloat(campos.elements[i].value);
if (isNaN(suma)) suma = total;

}

//Asigno la suma a un label que ira cambiando de acuerdo a la cantidad que se capture
document.getElementById('MiLabelTOTAL').innerHTML = suma;



}


</script>
</head>
<body>
<form name="form1">
<input type="text" name="CampoaSumar" id="Campo1" value="0" onkeyup="sumacampos();" />
<input type="text" name="CampoaSumar" id="Campo2" value="0" onkeyup="sumacampos();" />
<input type="text" name="CampoaSumar" id="Campo3" value="0" onkeyup="sumacampos();" />
<!-- Supongamos que estos checkbox se generan dinamicamente de una consulta a una tabla de mysql y php; y en su propiedad value se le asigna el id numerico-->
<label>
<input type="checkbox" name="CampoaSumar" id="Campo4" value="3" /> Mexico</label>
<label><input type="checkbox" name="CampoaSumar" id="Campo5" value="4" /> USA</label>
<label><input type="checkbox" name="CampoaSumar" id="Campo6" value="13" /> Venezuela</label>
<label><input type="radio" name="miRadio" id="miRadio" value="12" />Argentina</label>

<br/>
Total:<label id="MiLabelTOTAL" >0</label>
</form>


</body>
</html>

Saludos!!!!

IsaBelM · #5 (**permalink**) 04/02/2011, 14:43

modifiqué el código arreglo al html que tú mostrastes. ahora, si el caso es que también puede haber radios, etc.... usa el método getElementsByTagName()

Huacho12 · #6 (**permalink**) 08/02/2011, 09:14

Hola IsaBelM!!!

Creo que no me explique bien, a lo que refiero y tomando de nuevo el ejemplo de los textbox dinamicos atraves de php y mysql, es que por decir de acuerdo a mi consulta yo quiero sacar dos totales diferentes de textbox diferentes, el codigo asi como lo modificaste y aun poniendo el getElementsByTagName() y lo cual no digo que esta mal, se seguierian sumando para sacar un solo total.

Aqui modifique el codigo para veas a lo que me refiero:

Código HTML:

<html>
<head>
<title>Sumar campos</title>

<script language="javascript"  type="text/javascript">

function sumacampos(id,IDTOTAL,NombreCampo)
{
    //declaro variable que almacenara la suma total
    var suma = parseFloat(eval("document.getElementById('"+id+"').value")); //le asigno el valor del campo actual

//el "CampoaSumar" son los campos textBox que se sumaran
for(var i=0; i < eval("document.form1."+NombreCampo+".length"); i++)
{
//Comparo el id del campo en que me encuentro para no sumarlo nuevamente y sumar los demas    
if(eval("document.getElementById('"+id+"').id") != eval("document.form1."+NombreCampo+"["+i+"].id") )
    {
        //Recorro el vector de los campos y realizo la suma
         suma = suma + parseFloat(eval("document.form1."+NombreCampo+"["+i+"].value"));
    }
 
     //Asigno la suma a un label que ira cambiando de acuerdo a la cantidad que se capture
     document.getElementById(IDTOTAL).innerHTML = suma;
}


}


</script>
</head>
<body>
<form name="form1">
<input type="text" name="CampoaSumar" id="Campo1" value="0" onkeyup="sumacampos('Campo1','MiLabelTOTAL','CampoaSumar');" />
<br/><input type="text" name="CampoaSumar" id="Campo2" value="0" onkeyup="sumacampos('Campo2','MiLabelTOTAL','CampoaSumar');" />
<br/><input type="text" name="CampoaSumar" id="Campo3" value="0" onkeyup="sumacampos('Campo3','MiLabelTOTAL','CampoaSumar');" />
<br/>
Total:<label id="MiLabelTOTAL" >0</label>
<br/><br/>
<input type="text" name="Sumar2" id="C1" value="0" onkeyup="sumacampos('C1','MiLabelTOTAL2','Sumar2');" /><br/>
<input type="text" name="Sumar2" id="C2" value="0" onkeyup="sumacampos('C2','MiLabelTOTAL2','Sumar2');" /><br/>
<input type="text" name="Sumar2" id="C3" value="0" onkeyup="sumacampos('C3','MiLabelTOTAL2','Sumar2');" /><br/>
<br/>
Total:<label id="MiLabelTOTAL2" >0</label>


</form>


</body>
</html>

Saludos!!!!!!!!!

IsaBelM · #7 (**permalink**) 08/02/2011, 14:26

yo creo que no. prueba a ver si es esto a lo que te refieres. con el método getElementsByName() obtienes una colección de los elementos que comparten ese nombre. a partir de ahí es sencillo

Cita:

<html>
<head>
<title>Sumar campos</title>

<script language="javascript" type="text/javascript">
var total = 0;
function sumacampos(grupo)
{

var suma = 0;

//el "CampoaSumar" son los campos textBox que se sumaran
for(var i=0, campos = document.getElementsByName(grupo); i < campos.length; i++)
{

//Recorro el vector de los campos y realizo la suma
total = suma;
suma += parseFloat(campos[i].value);
if (isNaN(suma)) suma = total;

}

//Asigno la suma a un label que ira cambiando de acuerdo a la cantidad que se capture
document.getElementById(grupo+'TOTAL').innerHTML = suma;

}

</script>
</head>
<body>
<form name="form1">
<input type="text" name="CampoaSumar" value="0" onkeyup="sumacampos(this.name);" />
<input type="text" name="CampoaSumar" value="0" onkeyup="sumacampos(this.name);" />
<input type="text" name="CampoaSumar" value="0" onkeyup="sumacampos(this.name);" />
<br/>
Total:<label id="CampoaSumarTOTAL" >0</label>
<br/><br/>
<input type="text" name="CampoaSumar2" value="0" onkeyup="sumacampos(this.name);"
/>
<input type="text" name="CampoaSumar2" value="0" onkeyup="sumacampos(this.name);" />
<input type="text" name="CampoaSumar2" value="0" onkeyup="sumacampos(this.name);" />
<br/>
Total:<label id="CampoaSumar2TOTAL" >0</label>
</form>

</body>
</html>

Huacho12 · #8 (**permalink**) 09/02/2011, 11:04

Hola IsaBelM!!!

No cabe duda que compartiendo tu codigo y habiendo alguien que te corrija o te diga como hacerlo de la mejor manera, es la mejor forma de aprender y conocer nuevas formas o estilos de programación.

Definitivamente tu codigo quedo mas reducido que el que puse. Solamente podrias explicar la validacion que haces del isNaN(), entiendo que el isNaN() devuelve falso si es numero y true si son letras, pero como defines tu validación???

if(isNAN(suma))suma=total , esta me revuelve un poco.

Y tambien otra que me llamo la atencion es la del FOR(){}, de que defines o inicializas dos variables distinta.

Saludos!!!

Y gracias de antemano!!!!

IsaBelM · #9 (**permalink**) 09/02/2011, 12:19

así lo verás mejor

Cita:

if(isNAN(suma)) {
suma=total;
}

como ves es una simple validación. si el valor es nan, suma es igual a total, o quizás tu conflicto venga por que no ves las llaves. las llaves puedes usarlas o no usarlas

Cita:

if(campo ==1) valor = 1
elseif ( campo == 2) valor = 2
else
valor = 3

es lo mismo que

Cita:

if(campo ==1) { valor = 1
} elseif ( campo == 2) { valor = 2
} else {
valor = 3

en cuanto al for, puedes definir la variable fuera del for

Cita:

var campos = document.getElementsByName(grupo)
for(var i=0; i < campos.length; i++)

pero de esta manera no aprovechas la definición de i

spicke23 · #10 (**permalink**) 10/02/2011, 08:10

holas he visto sus códigos y es lo que necesito para un sistema que estoy realizando, pero mi duda es...

como puedo puedo hacer para que el valor total de la suma aparezca en un input???

o sea q en vez de usar un ****.innerHTML, pueda poner ese valor en un campo de texto

gracias

Código HTML:

Ver original<html>
<head>
<title>Sumar campos</title>
 
<script language="javascript"  type="text/javascript">
 
function sumacampos(id,IDTOTAL,NombreCampo){
    //declaro variable que almacenara la suma total
    var suma = parseFloat(eval("document.getElementById('"+id+"').value")); //le asigno el valor del campo actual
 
//el "CampoaSumar" son los campos textBox que se sumaran
for(var i=0; i < eval("document.form1."+NombreCampo+".length"); i++){
//Comparo el id del campo en que me encuentro para no sumarlo nuevamente y sumar los demas    
if(eval("document.getElementById('"+id+"').id") != eval("document.form1."+NombreCampo+"["+i+"].id") )    {
        //Recorro el vector de los campos y realizo la suma
         suma = suma + parseFloat(eval("document.form1."+NombreCampo+"["+i+"].value"));
    }
 
     //Asigno la suma a un label que ira cambiando de acuerdo a la cantidad que se capture
     document.getElementById(IDTOTAL).innerHTML = suma;
}
}
</script>
</head>
<body>
<form name="form1">
<br/><input type="text" name="CampoaSumar" id="Campo1" value="0" onkeyup="sumacampos('Campo1','MiLabelTOTAL','CampoaSumar');" />
<br/><input type="text" name="CampoaSumar" id="Campo2" value="0" onkeyup="sumacampos('Campo2','MiLabelTOTAL','CampoaSumar');" />
<br/><input type="text" name="CampoaSumar" id="Campo3" value="0" onkeyup="sumacampos('Campo3','MiLabelTOTAL','CampoaSumar');" />
<br/>
Total:<label id="MiLabelTOTAL" >0</label> <!-- AQUI DEBERÏA ESTAR EL CAMPO DE TEXTO -->
</form>
</body>
</html>

mamilo · #11 (**permalink**) 10/02/2011, 08:15

si no me equivoco tendrias que pasar el valor en el javascript

el resultado de la suma cargarlo asi

document.getElementById(nombre_id_input).value=res ultado;

pruebalo asi y me dices como te va

IsaBelM · #12 (**permalink**) 10/02/2011, 08:21

veo que te has parado en el primer código. no digo que no sea correcto pero es optimizable
para insertar el valor en un textbox cambia innerHTML por value

spicke23 · #13 (**permalink**) 10/02/2011, 08:35

mmm... no me ayuda mucho, puedes ser mas detallista por favor?

gracias

IsaBelM · #14 (**permalink**) 10/02/2011, 08:38

Cita:

Iniciado por spicke23

mmm... no me ayuda mucho, puedes ser mas detallista por favor?

gracias

pues ya solo queda pasarlo por el pasa puré

mamilo · #15 (**permalink**) 10/02/2011, 08:43

compañero

lo unico que tiene que cambiar en el codigo es:

este codigo que pusiste que es:

document.getElementById(IDTOTAL).innerHTML = suma;

pone este codigo:

document.getElementById(IDTOTAL).value = suma;

para pasarle valores a los textbox se dan con el value. pruebalo ahora si

tienes que cambiar solamente eso que te dije

spicke23 · #16 (**permalink**) 10/02/2011, 09:01

a ver...

el codigo es este... cierto?

Código PHP:

  <html> 
<head> 
<title>Sumar campos</title> 
  
<script language="javascript"  type="text/javascript"> 
  
function sumacampos(id,IDTOTAL,NombreCampo){ 
    //declaro variable que almacenara la suma total 
    var suma = parseFloat(eval("document.getElementById('"+id+"').value")); //le asigno el valor del campo actual 
  
//el "CampoaSumar" son los campos textBox que se sumaran 
for(var i=0; i < eval("document.form1."+NombreCampo+".length"); i++){ 
//Comparo el id del campo en que me encuentro para no sumarlo nuevamente y sumar los demas     
if(eval("document.getElementById('"+id+"').id") != eval("document.form1."+NombreCampo+"["+i+"].id") )    { 
        //Recorro el vector de los campos y realizo la suma 
         suma = suma + parseFloat(eval("document.form1."+NombreCampo+"["+i+"].value")); 
    } 
  
     //Asigno la suma a un label que ira cambiando de acuerdo a la cantidad que se capture 
     document.getElementById(IDTOTAL).innerHTML = suma; 
} 
} 
</script> 
</head> 
<body> 
<form name="form1"> 
<br/><input type="text" name="CampoaSumar" id="Campo1" value="0" onkeyup="sumacampos('Campo1','MiLabelTOTAL','CampoaSumar');" /> 
<br/><input type="text" name="CampoaSumar" id="Campo2" value="0" onkeyup="sumacampos('Campo2','MiLabelTOTAL','CampoaSumar');" /> 
<br/><input type="text" name="CampoaSumar" id="Campo3" value="0" onkeyup="sumacampos('Campo3','MiLabelTOTAL','CampoaSumar');" /> 
<br/> 
Total:<label id="MiLabelTOTAL" >0</label> <!-- AQUI DEBERÏA ESTAR EL CAMPO DE TEXTO --> 
</form> 
</body> 
</html>

debo agregar algun campo como parametro al invocar la funcion para que despues en el input q quiero q se despliegue el valor lo haga?

eso... ojala dejaran las burlas y pudieran ser algo mas detallistas y especificos con sus respuestas

mamilo · #17 (**permalink**) 10/02/2011, 09:05

ncesitas pasarlos a datos tipo int o float
eso lo haces con un parseInt o parseFloat
y ahi los sumas
y los guardas en suma y lo pasas con el innerHTML al label

Adler · #18 (**permalink**) 10/02/2011, 09:06

Hola

No te cabrees. Por dos ocasiones te han dicho lo que has de hacer

Cita:

Iniciado por mamilo

si no me equivoco tendrias que pasar el valor en el javascript

el resultado de la suma cargarlo asi

document.getElementById(nombre_id_input).value=res ultado;

pruebalo asi y me dices como te va

Cita:

Iniciado por IsaBelM

veo que te has parado en el primer código. no digo que no sea correcto pero es optimizable
para insertar el valor en un textbox cambia innerHTML por value

Usa el código de @IsabelM

, estás mas optimizado

Cita:

Cambia
document.getElementById(IDTOTAL).innerHTML = suma;
por
document.getElementById(IDTOTAL).value = suma;

y crea el campo textbox

Suerte

mamilo · #19 (**permalink**) 10/02/2011, 09:10

el quiere mostrar el total en un label pro lo que vi en el codigo

si es asi tiene que ocupar el innerHTML si cambia el label por un input ahi tendria que ocupas el value

spicke23 · #20 (**permalink**) 10/02/2011, 09:32

Disculpen mi bronca chicos, pero este famoso script, me ha tenido de cabeza los últimos 5 días :(

ahi lo modifiqué y funciona a la perfección.

se los dejo por si alguien lo quiere. :D

Código HTML:

Ver original<html>
<head>
<title>Sumar campos</title>
 
<script language="javascript"  type="text/javascript">
 
function sumacampos(id,IDTOTAL,NombreCampo)
{
    //declaro variable que almacenara la suma total
    var suma = parseFloat(eval("document.getElementById('"+id+"').value")); //le asigno el valor del campo actual
    
    //declaro campo que se mostrara en el input
    var IDTOTAL = document.getElementById(IDTOTAL);
 
//el "CampoaSumar" son los campos textBox que se sumaran
for(var i=0; i < eval("document.form1."+NombreCampo+".length"); i++)
{
//Comparo el id del campo en que me encuentro para no sumarlo nuevamente y sumar los demas    
if(eval("document.getElementById('"+id+"').id") != eval("document.form1."+NombreCampo+"["+i+"].id") )
    {
        //Recorro el vector de los campos y realizo la suma
         suma = suma + parseFloat(eval("document.form1."+NombreCampo+"["+i+"].value"));
    }
 
     //Asigno la suma a un label que ira cambiando de acuerdo a la cantidad que se capture
     IDTOTAL.value = suma;
}
 
 
}
 
 
</script>
</head>
<body>
<form name="form1">
<br/><input type="text" name="CampoaSumar" id="Campo1" value="0" onkeyup="sumacampos('Campo1','MiLabelTOTAL','CampoaSumar');" />
<br/><input type="text" name="CampoaSumar" id="Campo2" value="0" onkeyup="sumacampos('Campo2','MiLabelTOTAL','CampoaSumar');" />
<br/><input type="text" name="CampoaSumar" id="Campo3" value="0" onkeyup="sumacampos('Campo3','MiLabelTOTAL','CampoaSumar');" />
<br/>
Total:<input type="text" readOnly="true" value="0" id="MiLabelTOTAL" />
</form>
</body>
</html>

auri501 · #21 (**permalink**) 21/11/2011, 08:58

Hola a todos,

He visto este tema y me ha servido a la perfección para lo que yo necesitaba, lo único que necesito nuevo es mandarlo por email.

Al intentar pasar los valores de los inputs por $_POST he visto que me ha sido imposible ya que al tener el mismo nombre, sólo envía el valor del último input.

Gracias!!

Código HTML:

Ver original<html>
<head>
<title>Sumar campos</title>
 
<script language="javascript"  type="text/javascript">
 
function sumacampos(id,IDTOTAL,NombreCampo)
{
    //declaro variable que almacenara la suma total
    var suma = parseFloat(eval("document.getElementById('"+id+"').value")); //le asigno el valor del campo actual
    
    //declaro campo que se mostrara en el input
    var IDTOTAL = document.getElementById(IDTOTAL);
 
//el "CampoaSumar" son los campos textBox que se sumaran
for(var i=0; i < eval("document.form1."+NombreCampo+".length"); i++)
{
//Comparo el id del campo en que me encuentro para no sumarlo nuevamente y sumar los demas    
if(eval("document.getElementById('"+id+"').id") != eval("document.form1."+NombreCampo+"["+i+"].id") )
    {
        //Recorro el vector de los campos y realizo la suma
         suma = suma + parseFloat(eval("document.form1."+NombreCampo+"["+i+"].value"));
    }
 
     //Asigno la suma a un label que ira cambiando de acuerdo a la cantidad que se capture
     IDTOTAL.value = suma;
}
 
 
}
 
 
</script>
</head>
<?php 
echo "<pre>";
print_r($_POST);
echo "</pre>";
?>
<body>
<form name="form1" action="sumar_campos.php" method="post">
<br/><input type="text" name="CampoaSumar" id="Campo1" value="0" onkeyup="sumacampos('Campo1','MiLabelTOTAL','CampoaSumar');" />
<br/><input type="text" name="CampoaSumar" id="Campo2" value="0" onkeyup="sumacampos('Campo2','MiLabelTOTAL','CampoaSumar');" />
<br/><input type="text" name="CampoaSumar" id="Campo3" value="0" onkeyup="sumacampos('Campo3','MiLabelTOTAL','CampoaSumar');" />
<br/>
Total:<input type="text" readOnly="true" value="0" id="MiLabelTOTAL" />
<input type="submit" value="enviar">
</form>
</body>
</html>

SirDuque · #22 (**permalink**) 23/11/2011, 19:09

Cita:

Iniciado por auri501

Hola a todos,

He visto este tema y me ha servido a la perfección para lo que yo necesitaba, lo único que necesito nuevo es mandarlo por email.

Al intentar pasar los valores de los inputs por $_POST he visto que me ha sido imposible ya que al tener el mismo nombre, sólo envía el valor del último input.

Gracias!!

Auri tendrias que crear un nuevo topic, y no revivir este....
Para solucionar el mismo valor del input podes poner corchetes al final del name

name="valor[]" y PHP interpreta eso como array();

O si buscas en el foro, chocas con un topic mio, el cual plantea estos problemas...
te invito leerlo TOPIC