Sumar resultados de una multiplicacion

karenlorenadg · #1 (**permalink**) 06/11/2013, 08:34

Estoy haciendo una suma de los resultados de una multiplicacion de varios campos, pero por mucho que intento no me da el valor. Ya que para que me sume los resultados tengo que escribirlos a mao, no los toma automaticamente del resultado de la suma en cada campo, ademas de eso, lo que me hace es sumar cada numero no el total, es decir, si escrito en cada campo 1, 1, 1, 1, que deberia darme un valor total de 4 lo que en realidad hace es escribirme los cuatro unos asi 1111. Entonces quiero que por favor alguien me ayude, ya solamente me falta eso. Anexo todo el código para que me puedan ayudar.

Es una multiplicación de la cantidad de articulo por su valor unitario, eso me funciona bien, lo que no me funciona es la suma total de todos los campos del resultado de la multiplicación para saber el total de la venta:

Este es el Codigo

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
 
<SCRIPT>
function multiplicar() {
m1 = document.getElementById("multiplicando").value;
m2 = document.getElementById("multiplicador").value;
r = m1*m2;
document.getElementById("resultado").value = r;
 
m1 = document.getElementById("multiplicando2").value;
m2 = document.getElementById("multiplicador2").value;
r2 = m1*m2;
document.getElementById("resultado2").value = r2;
 
m1 = document.getElementById("multiplicando3").value;
m2 = document.getElementById("multiplicador3").value;
r3 = m1*m2;
document.getElementById("resultado3").value = r3;
 
m1 = document.getElementById("multiplicando4").value;
m2 = document.getElementById("multiplicador4").value;
r4 = m1*m2;
document.getElementById("resultado4").value = r4;
 
}
 
function sumar() {
t1 = document.getElementById("resultado").value;
t2 = document.getElementById("resultado2").value;
t3 = document.getElementById("resultado3").value;
t4 = document.getElementById("resultado4").value;
 
rt = t1+t2+t3+t4;
document.getElementById("total").value = rt;
}
 
</SCRIPT>
 
</head>
 
<body>
 
<table align="center" border="0">
<form id="multiplicar" action="reg01.php" method="post">
 
<tr align="center" valign="middle">
  <td><strong>Pedido</strong></td>
  <td><strong>Nombre Producto</strong></td>
  <td><strong>Cantidad</strong></td>
  <td><strong>Vr Unit.</strong></td>
  <td>&nbsp;</td>
</tr>
 
 
<tr>
 
<td>Producto 1</td>
<td><input type="text" name="producto" size="60"></td>
<td><input type="text" name="cant" id="multiplicando" value=0 onchange="multiplicar();" size="4" /></td>
<td><input type="text" name="vunit" id="multiplicador" onchange="multiplicar();" value=0 size="16" /></td>
<td align="right"><input type="text" name="resultado" id="resultado" onchange="sumar();" value=0 size="20" /></td>
</tr>
 
<tr>
<td>Producto 2</td>
<td><input type="text" name="producto2" size="60" /></td>
<td><input type="text" name="cant2" id="multiplicando2" value=0 onchange="multiplicar();" size="4" /></td>
<td><input type="text" name="vunit2" id="multiplicador2" onchange="multiplicar();" value=0 size="16" /></td>
<td align="right"><input type="text" name="resultado2" id="resultado2" onchange="sumar();" value=0 size="20"/></td>
</tr>
 
<tr>
 <td>Producto 3</td>
 <td><input type="text" name="producto3" size="60" /></td>
<td><input type="text" name="cant3" id="multiplicando3" value=0 onchange="multiplicar();" size="4" /></td>
<td><input type="text" name="vunit3" id="multiplicador3" onchange="multiplicar();" value=0 size="16" /></td>
<td align="right"><input type="text" name="resultado3" id="resultado3" onchange="sumar();" value=0 size="20" /></td> 
</tr>
 
<tr>
<td>Producto 4</td>
<td><input type="text" name="producto4" size="60" /></td>
<td><input type="text" name="cant4" id="multiplicando4" value=0 onchange="multiplicar();" size="4" /></td>
<td><input type="text" name="vunit4" id="multiplicador4" onchange="multiplicar();" value=0 size="16" /></td>
<td align="right"><input type="text" name="resultado4" id="resultado4" onchange="sumar();" value=0 size="20"/></td> 
</tr>
 
<tr> 
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td align="right">Total</td>
<td align="right">
  <input type="text" name="total" id="total" size="20" />
 </td>
 </tr>
<tr>
  <td><input type="submit" name="enviar" id="enviar" value="Enviar" /></td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td align="right">&nbsp;</td>
</tr>
 
 
 
</form>
 
</table>
 
</body>
</html>

quinqui · #2 (**permalink**) 06/11/2013, 08:38

Holas, karenlorenadg.

Lo que pasa es que las variables son de tipo texto, y el signo + de JS las toma como tal, por eso las concatena, no las suma como números. Debes convertirlas de alguna forma a número, puedes usar una función como parseInt() sobre cada variable, o prueba multiplicando cada variable por 1 (eso no lo he probado, pero en teoría funcionaría, creo).

Saludos!

karenlorenadg · #3 (**permalink**) 06/11/2013, 10:10

Todo bien pero ahora no logro que me sume automáticamente del resultado obtenidos de los campos Cantidad y Valor Unitario, los suma sólo si yo los ingreso manualmente en el total de cada producto. ¡Qué puedo hacer, como hago para que me lea los valores automáticamente del resultado de la multiplicación de cada producto sin tener que hacerlo manualmente? Anexo una imagen de lo que quiero lograr

quinqui · #4 (**permalink**) 06/11/2013, 13:04

Ok, calma ^^
Intenta agregando una captura al evento keypress de los input donde ingresas Cantidad y Valor, de modo que cada vez que vayas escribiendo, vaya refrescando el valor de los inputs en la columna Total.

Algo como esto:

Código HTML:

<!-- esto es una fila -->
<input type="text" name="cantidad[]" id="cantidad_1" onkeypress="recalcular(1)" />
<input type="text" name="valor[]" id="valor_1" onkeypress="recalcular(1)" />
<input type="text" name="subtotal[]" id="subtotal_1" />

Donde la función recalcular() es JS y contiene:
1. La multiplicación de cantidad por valor, de la cual colocarás el resultado en el value de la casilla Total de la fila correspondiente (dada por el parámetro, en el ejemplo "1", porque es la fila "1").
2. La suma de las casillas Total. Ahí debieras realizar un loop por todas las casillas de Total, si las tienes en un array es lo ideal (como lo coloqué yo en el ejemplo).

En ese sentido, podrías reducir el tamaño de tu función multiplicar(), a que reciba sólo los valores a multiplicar de la fila seleccionada (de la fila donde estás escribiendo). Al final, la función recalcular() debiera simplemente llamar a multiplicar() (de la fila en curso) y a sumar().

Saludos!

karenlorenadg · #5 (**permalink**) 07/11/2013, 07:19

No logro entenderte, cómo haga para aplicarlo a mis lineas, podrías indicarme por favor en que sitio exactamente lo debo hacer, estoy intentando pero por lo que me propones es modificar gran cantidad de mi JS. Espero tu valiosa colaboración.

quinqui · #6 (**permalink**) 07/11/2013, 08:48

Actualmente, tu función multiplicar() realiza la multiplicación de todas las filas de la tabla. Mi sugerencia es que sólo haga la multiplicación de la fila seleccionada, la fila donde el usuario está escribiendo los valores (en las casillas de Cantidad y Valor). Algo como esto (y estoy dándote el código nuevo):

Código javascript:

Ver originalfunction multiplicar(posFila) {
m1 = document.getElementById("multiplicando_" + posFila).value;
m2 = document.getElementById("multiplicador_" + posFila).value;
r = m1*m2;
document.getElementById("resultado_" + posFila).value = r;
}

Para que esto funcione, tienes que nombrar e identificar a las casillas de la tabla como te lo puse en mi post anterior.

La función recalcular() se gatillará a raíz del evento keypress, como te decía antes (si no conoces este evento, o en general sobre eventos en JS, investígalo googleando). La función lo que hará será recibir el número de la fila, de modo que:

Código javascript:

Ver originalfunction recalcular(posFila)
{
 multiplicar(posFila);
 sumar();
}

En verdad con todo esto modificas tu código, pero sólo lo resumes, no lo cambias demasiado de lo que ya tenías.

Saludos!

karenlorenadg · #7 (**permalink**) 09/11/2013, 09:23

Lo siento pero no logro hacer lo que me dices, podrías explicarme un poco mas, por mucho que lo intento y nada me funciona, lo que ocurre ahora es que ni siquiera me hace la multiplicación de Cantidad por Vr Unitario. Ahora si me perdi

satjaen · #8 (**permalink**) 09/11/2013, 11:44

A ver si te sirven estos ejemplos:

Código Javascript:

Ver original<html>
<head>
<script>
function actualiza_total()
{
 
    var cant = document.getElementById('cantidad').value;
    var precio = document.getElementById('precio').value;
    if(isNaN(cant) || isNaN(precio)) {
        alert("Solo valores numericos por favor");
        document.getElementById('cantidad').value = "";
        document.getElementById('precio').value = "";
        return;
    }
    document.getElementById('total').value = cant*precio;
}
</script>
</head>
 
<body>
    <input type="text" id="cantidad">
    <input type="text" id="precio">
    <input type="button" value="multiplicar" onClick="actualiza_total()">
    <input type="text" id="total">
</body>
</html>

Código Javascript:

Ver original<html>
<head>
<script>
function actualiza_total()
{
 
    var cant = document.getElementById('cantidad').value;
    var precio = document.getElementById('precio').value;
    if(isNaN(cant) || isNaN(precio)) {
        alert("Solo valores numericos por favor");
        document.getElementById('cantidad').value = "";
        document.getElementById('precio').value = "";
        return;
    }
    document.getElementById('total').value = cant*precio;
}
</script>
</head>
 
<body>
    <input type="text" id="cantidad">
    <input type="text" id="precio">
    <input type="text" id="total" onfocus="actualiza_total()">
</body>
</html>

Un saludo

quinqui · #9 (**permalink**) 11/11/2013, 07:42

Holas, satjaen. Los códigos están buenos, pero karen necesita que los valores se vayan actualizando al mismo tiempo que va escribiendo en los input text.
Saludos!