Foros del Web » Programando para Internet » Javascript »

Suma de TextBox para mostrar Total

Estas en el tema de Suma de TextBox para mostrar Total en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 03/02/2011, 10:57
Avatar de Huacho12  
Fecha de Ingreso: septiembre-2008
Ubicación: Isla Mujeres Q. Roo
Mensajes: 175
Antigüedad: 11 años, 6 meses
Puntos: 10
Suma de TextBox para mostrar Total

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!!!!!!!!!
__________________
Solo se... que no se nada!!! 0_o
  #2 (permalink)  
Antiguo 03/02/2011, 14:07
Avatar de SirDuque  
Fecha de Ingreso: febrero-2009
Ubicación: Paso del Rey, Buenos Aires, Argentina
Mensajes: 975
Antigüedad: 11 años, 1 mes
Puntos: 89
Respuesta: Suma de TextBox para mostrar Total

Gracias por el aporte Huacho12! seguro que nos sirve a todos!!!!
__________________
Mono programando!
twitter.com/eguimariano
  #3 (permalink)  
Antiguo 03/02/2011, 16:08
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 11 años, 9 meses
Puntos: 1011
Respuesta: Suma de TextBox para mostrar Total

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>
  #4 (permalink)  
Antiguo 04/02/2011, 08:03
Avatar de Huacho12  
Fecha de Ingreso: septiembre-2008
Ubicación: Isla Mujeres Q. Roo
Mensajes: 175
Antigüedad: 11 años, 6 meses
Puntos: 10
Respuesta: Suma de TextBox para mostrar Total

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!!!!
__________________
Solo se... que no se nada!!! 0_o
  #5 (permalink)  
Antiguo 04/02/2011, 13:43
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 11 años, 9 meses
Puntos: 1011
Respuesta: Suma de TextBox para mostrar Total

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()
  #6 (permalink)  
Antiguo 08/02/2011, 08:14
Avatar de Huacho12  
Fecha de Ingreso: septiembre-2008
Ubicación: Isla Mujeres Q. Roo
Mensajes: 175
Antigüedad: 11 años, 6 meses
Puntos: 10
Respuesta: Suma de TextBox para mostrar Total

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!!!!!!!!!
__________________
Solo se... que no se nada!!! 0_o
  #7 (permalink)  
Antiguo 08/02/2011, 13:26
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 11 años, 9 meses
Puntos: 1011
Respuesta: Suma de TextBox para mostrar Total

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>
  #8 (permalink)  
Antiguo 09/02/2011, 10:04
Avatar de Huacho12  
Fecha de Ingreso: septiembre-2008
Ubicación: Isla Mujeres Q. Roo
Mensajes: 175
Antigüedad: 11 años, 6 meses
Puntos: 10
Respuesta: Suma de TextBox para mostrar Total

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!!!!
__________________
Solo se... que no se nada!!! 0_o
  #9 (permalink)  
Antiguo 09/02/2011, 11:19
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 11 años, 9 meses
Puntos: 1011
Respuesta: Suma de TextBox para mostrar Total

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
  #10 (permalink)  
Antiguo 10/02/2011, 07:10
Avatar de spicke23  
Fecha de Ingreso: septiembre-2005
Mensajes: 17
Antigüedad: 14 años, 6 meses
Puntos: 0
Respuesta: Suma de TextBox para mostrar Total

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
  1. <title>Sumar campos</title>
  2.  
  3. <script language="javascript"  type="text/javascript">
  4.  
  5. function sumacampos(id,IDTOTAL,NombreCampo){
  6.     //declaro variable que almacenara la suma total
  7.     var suma = parseFloat(eval("document.getElementById('"+id+"').value")); //le asigno el valor del campo actual
  8.  
  9. //el "CampoaSumar" son los campos textBox que se sumaran
  10. for(var i=0; i < eval("document.form1."+NombreCampo+".length"); i++){
  11. //Comparo el id del campo en que me encuentro para no sumarlo nuevamente y sumar los demas    
  12. if(eval("document.getElementById('"+id+"').id") != eval("document.form1."+NombreCampo+"["+i+"].id") )    {
  13.        //Recorro el vector de los campos y realizo la suma
  14.         suma = suma + parseFloat(eval("document.form1."+NombreCampo+"["+i+"].value"));
  15.    }
  16.  
  17.     //Asigno la suma a un label que ira cambiando de acuerdo a la cantidad que se capture
  18.     document.getElementById(IDTOTAL).innerHTML = suma;
  19. }
  20. }
  21. </head>
  22. <form name="form1">
  23. <br/><input type="text" name="CampoaSumar" id="Campo1" value="0" onkeyup="sumacampos('Campo1','MiLabelTOTAL','CampoaSumar');" />
  24. <br/><input type="text" name="CampoaSumar" id="Campo2" value="0" onkeyup="sumacampos('Campo2','MiLabelTOTAL','CampoaSumar');" />
  25. <br/><input type="text" name="CampoaSumar" id="Campo3" value="0" onkeyup="sumacampos('Campo3','MiLabelTOTAL','CampoaSumar');" />
  26. <br/>
  27. Total:<label id="MiLabelTOTAL" >0</label> <!-- AQUI DEBERÏA ESTAR EL CAMPO DE TEXTO -->
  28. </form>
  29. </body>
  30. </html>
  #11 (permalink)  
Antiguo 10/02/2011, 07:15
 
Fecha de Ingreso: febrero-2011
Mensajes: 14
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: Suma de TextBox para mostrar Total

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
  #12 (permalink)  
Antiguo 10/02/2011, 07:21
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 11 años, 9 meses
Puntos: 1011
Respuesta: Suma de TextBox para mostrar Total

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
  #13 (permalink)  
Antiguo 10/02/2011, 07:35
Avatar de spicke23  
Fecha de Ingreso: septiembre-2005
Mensajes: 17
Antigüedad: 14 años, 6 meses
Puntos: 0
Respuesta: Suma de TextBox para mostrar Total

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

gracias
  #14 (permalink)  
Antiguo 10/02/2011, 07:38
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 11 años, 9 meses
Puntos: 1011
Respuesta: Suma de TextBox para mostrar Total

Cita:
Iniciado por spicke23 Ver Mensaje
mmm... no me ayuda mucho, puedes ser mas detallista por favor?

gracias
pues ya solo queda pasarlo por el pasa puré
  #15 (permalink)  
Antiguo 10/02/2011, 07:43
 
Fecha de Ingreso: febrero-2011
Mensajes: 14
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: Suma de TextBox para mostrar Total

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
  #16 (permalink)  
Antiguo 10/02/2011, 08:01
Avatar de spicke23  
Fecha de Ingreso: septiembre-2005
Mensajes: 17
Antigüedad: 14 años, 6 meses
Puntos: 0
Respuesta: Suma de TextBox para mostrar Total

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< 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
  #17 (permalink)  
Antiguo 10/02/2011, 08:05
 
Fecha de Ingreso: febrero-2011
Mensajes: 14
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: Suma de TextBox para mostrar Total

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
  #18 (permalink)  
Antiguo 10/02/2011, 08:06
Avatar de Adler
Colaborador
 
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 13 años, 2 meses
Puntos: 126
Respuesta: Suma de TextBox para mostrar Total

Hola

No te cabrees. Por dos ocasiones te han dicho lo que has de hacer
Cita:
Iniciado por mamilo Ver Mensaje
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 Ver Mensaje
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
__________________
Los formularios se envían/validan con un botón Submit
<input type="submit" value="Enviar" style="background-color:#0B5795; font:bold 10px verdana; color:#FFF;" />
  #19 (permalink)  
Antiguo 10/02/2011, 08:10
 
Fecha de Ingreso: febrero-2011
Mensajes: 14
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: Suma de TextBox para mostrar Total

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
  #20 (permalink)  
Antiguo 10/02/2011, 08:32
Avatar de spicke23  
Fecha de Ingreso: septiembre-2005
Mensajes: 17
Antigüedad: 14 años, 6 meses
Puntos: 0
Respuesta: Suma de TextBox para mostrar Total

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
  1. <title>Sumar campos</title>
  2.  
  3. <script language="javascript"  type="text/javascript">
  4.  
  5. function sumacampos(id,IDTOTAL,NombreCampo)
  6. {
  7.     //declaro variable que almacenara la suma total
  8.     var suma = parseFloat(eval("document.getElementById('"+id+"').value")); //le asigno el valor del campo actual
  9.    
  10.     //declaro campo que se mostrara en el input
  11.     var IDTOTAL = document.getElementById(IDTOTAL);
  12.  
  13. //el "CampoaSumar" son los campos textBox que se sumaran
  14. for(var i=0; i < eval("document.form1."+NombreCampo+".length"); i++)
  15. {
  16. //Comparo el id del campo en que me encuentro para no sumarlo nuevamente y sumar los demas    
  17. if(eval("document.getElementById('"+id+"').id") != eval("document.form1."+NombreCampo+"["+i+"].id") )
  18.    {
  19.        //Recorro el vector de los campos y realizo la suma
  20.         suma = suma + parseFloat(eval("document.form1."+NombreCampo+"["+i+"].value"));
  21.    }
  22.  
  23.     //Asigno la suma a un label que ira cambiando de acuerdo a la cantidad que se capture
  24.     IDTOTAL.value = suma;
  25. }
  26.  
  27.  
  28. }
  29.  
  30.  
  31. </head>
  32. <form name="form1">
  33. <br/><input type="text" name="CampoaSumar" id="Campo1" value="0" onkeyup="sumacampos('Campo1','MiLabelTOTAL','CampoaSumar');" />
  34. <br/><input type="text" name="CampoaSumar" id="Campo2" value="0" onkeyup="sumacampos('Campo2','MiLabelTOTAL','CampoaSumar');" />
  35. <br/><input type="text" name="CampoaSumar" id="Campo3" value="0" onkeyup="sumacampos('Campo3','MiLabelTOTAL','CampoaSumar');" />
  36. <br/>
  37. Total:<input type="text" readOnly="true" value="0" id="MiLabelTOTAL" />
  38. </form>
  39. </body>
  40. </html>
  #21 (permalink)  
Antiguo 21/11/2011, 07:58
 
Fecha de Ingreso: octubre-2007
Mensajes: 130
Antigüedad: 12 años, 5 meses
Puntos: 2
Respuesta: Suma de TextBox para mostrar Total

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
  1. <title>Sumar campos</title>
  2.  
  3. <script language="javascript"  type="text/javascript">
  4.  
  5. function sumacampos(id,IDTOTAL,NombreCampo)
  6. {
  7.     //declaro variable que almacenara la suma total
  8.     var suma = parseFloat(eval("document.getElementById('"+id+"').value")); //le asigno el valor del campo actual
  9.    
  10.     //declaro campo que se mostrara en el input
  11.     var IDTOTAL = document.getElementById(IDTOTAL);
  12.  
  13. //el "CampoaSumar" son los campos textBox que se sumaran
  14. for(var i=0; i < eval("document.form1."+NombreCampo+".length"); i++)
  15. {
  16. //Comparo el id del campo en que me encuentro para no sumarlo nuevamente y sumar los demas    
  17. if(eval("document.getElementById('"+id+"').id") != eval("document.form1."+NombreCampo+"["+i+"].id") )
  18.    {
  19.        //Recorro el vector de los campos y realizo la suma
  20.         suma = suma + parseFloat(eval("document.form1."+NombreCampo+"["+i+"].value"));
  21.    }
  22.  
  23.     //Asigno la suma a un label que ira cambiando de acuerdo a la cantidad que se capture
  24.     IDTOTAL.value = suma;
  25. }
  26.  
  27.  
  28. }
  29.  
  30.  
  31. </head>
  32. <?php
  33. echo "<pre>";
  34. print_r($_POST);
  35. echo "</pre>";
  36. ?>
  37. <form name="form1" action="sumar_campos.php" method="post">
  38. <br/><input type="text" name="CampoaSumar" id="Campo1" value="0" onkeyup="sumacampos('Campo1','MiLabelTOTAL','CampoaSumar');" />
  39. <br/><input type="text" name="CampoaSumar" id="Campo2" value="0" onkeyup="sumacampos('Campo2','MiLabelTOTAL','CampoaSumar');" />
  40. <br/><input type="text" name="CampoaSumar" id="Campo3" value="0" onkeyup="sumacampos('Campo3','MiLabelTOTAL','CampoaSumar');" />
  41. <br/>
  42. Total:<input type="text" readOnly="true" value="0" id="MiLabelTOTAL" />
  43. <input type="submit" value="enviar">
  44. </form>
  45. </body>
  46. </html>
  #22 (permalink)  
Antiguo 23/11/2011, 18:09
Avatar de SirDuque  
Fecha de Ingreso: febrero-2009
Ubicación: Paso del Rey, Buenos Aires, Argentina
Mensajes: 975
Antigüedad: 11 años, 1 mes
Puntos: 89
Respuesta: Suma de TextBox para mostrar Total

Cita:
Iniciado por auri501 Ver Mensaje
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

__________________
Mono programando!
twitter.com/eguimariano

Etiquetas: suma, textbox, totales
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Tema Cerrado




La zona horaria es GMT -6. Ahora son las 10:42.