multiplicar campos por fila y poner totales en resultado final

neveuster · #1 (**permalink**) 02/05/2012, 02:16

Hola... estoy tratando de poder multiplicar cantidad x precio = total y ya que el formulario añade nuevas filas de estos campos, entonces quisiera sumar todos los totales y ponerlos en resultado.

Quisiera que los valores vayan cambiando en tiempo real y hasta el momento he probado con onkeyup y ha funcionado pero lo que no logro es hacer lo que pido arriba, ya que lo que si he logrado es multiplicar todos los campos cantidad y precio y ponerla en resultado final... y no en su total...

les pido mucho su ayuda... gracias desde ya.

Aquí tengo el código para añadir campos...

Código HTML:

Ver original<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery Agregar campos</title>
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
 
 
 
<!-- inserta filas de campos en detalle -->
<script type="text/javascript"> 
emails=0; 
function agregar() { 
    emails=emails+1; 
    $("#campos").append('<li class="email'+emails+'"><label>cantidad</label><input type="text" name="cantidad[]" size="6"  value="0" onkeyup="sumar(this);"/><label>precio</label><input type="text" name="precio[]" size="8" value="0" onkeyup="sumar(this);" /><label>total</label><input type="text" name="total[]" size="8" /> </li>'); 
} 
</script>
<!-- fin inserta filas -->
 
 
</head>
<body>
 
 
<form name="frm_multiple" method="post" action="procesar.php">
<!-- FACTURA -->
    <label>fecha</label><input type="text" size="20" name="fecha_factura" />
    <label>rut</label><input type="text" size="20" name="rut" />
<!-- DESTALLE -->
    <ul id="emails">
        <li><a href="javascript:agregar();">Agregar</a><br />
        <label>cantidad</label><input type="text" size="6" name="cantidad[]" value="0" onkeyup="sumar(this);" />
        <label>precio</label><input type="text" size="8" name="precio[]" value="0" onkeyup="sumar(this);" />
        <label>total</label><input type="text" size="8" name="total[]" id="total" />
        </li>
        <li id="campos"><!-- aqui se crean los CAMPOS --></li>
    </ul>
    
    <p align="center"><input type="submit" name="Send" value="Send" /></p>
    </form>
 
</body>
</html>

neveuster · #2 (**permalink**) 04/05/2012, 01:38

Amigos... he intentado hacer las operaciones y no hay caso, no logro realizar la multiplicación y poner su resultado en un input y que luego automaticamente vaya poniendo la suma de todos los resultados en otro input que se encontrará debajo...

el sistema es parecido a cuando se hace una factura o un pedido.

Les pido mucho su ayuda.... desde ya muchísimas gracias por cualquier idea....

emprear · #3 (**permalink**) 04/05/2012, 02:02

y tu función sumar(), que es lo que hace por el momento?

Saludos

neveuster · #4 (**permalink**) 04/05/2012, 02:15

Perdón, lo que pasa es que haciendo pruebas y pruebas se me quedó eso en el código, probaba haciendo justamente haciendo sumas, pero como dije no hubo caso.

gracias.

emprear · #5 (**permalink**) 04/05/2012, 02:38

bueno, voy a asumir que algo de js sabes

Primero, tenemos que poder identificar correctamente los diferentes campos, para lo cual

usas esto

Código Javascript:

Ver original<script type="text/javascript"> 
emails=0; 
var c = 2;
var p = 2;
var t = 2;
function agregar() { 
    emails=emails+1; 
    $("#campos").append('<li class="email'+emails+'">\n<label>cantidad</label><input type="text" id="C_' + c + '" name="cantidad[]" size="6"  value="0" onkeyup="sumar(this);"/>\n<label>precio</label><input type="text" id="P_' + p + '" name="precio[]" size="8" value="0" onkeyup="sumar(this);" />\n<label>total</label><input type="text" id="T_' + t + '" name="total[]" size="8" />\n</li>'); 
c++;
p++;
t++;
} 
</script>

Con eso ya le agregas un id de valor único a cada uno de los campos de las filas nuevas, a la fila por defecto que te aparece tendrias que agregarle los id C_1, P_1 y T_1 para cantidad, precio y total respectivamente.
Además a todos tu campo total tenes que asignarles un mismo class

Ahora las sumas

tu campo total va ejecutando una función, la cual multiplica el valor de ese campo
(P_1 en el caso de la primera fila por el valor del campo de igual numero pero con el prefijo C_, lo cual podés obtener haciéndole un split() al id, ejemplo, si le hacés split a C_1 utilizando como separador el caracter _ te va a quedar que el numero es el indice [1], del split, solo te resta poner el resultado de la multiplicaciín en el campo T_1, es decir T_[1]

Por otra parte, tu campo "cantidad" deberá ejecutar una función que haga un document.getElementsByTagName para los input , identificar los que tengan la clase que definiste, recuperar los value, sumarlos e ir cambiando el value de resultados.

Parece complicado, pero no lo es tanto.
Demás está decir que todo este procedimiento no incluye ningún tipo de validación sobre el tipo de datos ingresados(que obviamente serán numeros enteros ó hasta con 2 decimales supongo, ya que se trata de precios

Saludos

neveuster · #6 (**permalink**) 04/05/2012, 03:28

Jejeje, bueno si se ve dificil

... lo he leído tres veces, ya entiendo la idea, pero lo que voy a hacer es que mañana voy a averiguar un poco acerca del split, el cual he ocupado en java, debe ser lo mismo aquí supongo... y luego realizar el resto de indicaciones que me das...

Agradezco mucho tu ayuda, la verdad es que me da mucha luz para poder seguir...

y una consulta... debido a que los input tienen value=0 es que no se pueden tomar los valores de ellos? debe hacerse forzosamente desde el id?

mira te dejo el pedazo de código que utilizaba para realizar operaciones matematicas y ponerla en un input... servirá si se modifica de algún modo??

Código Javascript:

Ver original<script type="text/javascript">
function sumar(c){
var subtotal = 0;
campo = c.form;
  if(!/^\d*$/.test(c.value)) return;
 
      for (var i = 0; i < campo.length-1; i++) {
          if (!/^\d+$/.test(campo[i].value)) continue;
              subtotal += parseInt(campo[i].value);
      }
document.getElementById('res').value = subtotal;
}
</script>

Aprovecho de aclarar que si, entiendo un poquitín de js, pero hay cosas que aveces me quedan muy grandes...

Denuevo mil gracias...

saludos. (ahhh si dije que mañana es por que son las 5:25am y me voy a dormir)

emprear · #7 (**permalink**) 04/05/2012, 03:39

Bueno, lee un poco, te aclaro que lo mio esta hecho muy en el aire, seguro se puede simplificar, pero el concepto debería funcionar.
Mañana lo reviso
que descanses