Operaciones en campos input con Jquery

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

Hola como están....

Tengo un formulario como el que está en el siguiente link http://lineadecodigo.com/wp-content/uploads/2007/01/calculo-de-totales-y-subtotales-en-javascript.html el problema al igual que en este formulario es que al anotar un numero en cualquiera de los campos hay luego que pinchar fuera o saltarse a otro campo para que se cambie el total...

He visto y me gustaría tener un formulario en el que al anotar un numero en un campo automáticamente vaya cambiando el total.

Se que con Jquery se puede hacer y en eso les pido su ayuda... ¿Donde podré encontrar un ejemplo para trabajarlo? o ¿Me podrían ayudar a hacer alguno?

Saludos y muchas gracias desde ya.

santris · #2 (**permalink**) 01/05/2012, 03:07

Faltaría arreglarlo un poco pero como idea te puede servir:

Copiar pegar y probar:

Cita:

fuente origen: http://www.forosdelweb.com/f13/actua...-input-895445/

neveuster · #3 (**permalink**) 01/05/2012, 23:39

Santris, mil gracias, está re-bueno este ejemplo... disculpa la demora en responder, no me había dado cuenta que habían movido el post...

saludos y gracias.

neveuster · #4 (**permalink**) 02/05/2012, 00:21

Uf...... después de implementarlo en medio de un código no puedo hacer que me resulte debido a que uso campos que se añaden y por lo tanto el nombre del input es nombre[] y el id debería ser igual.... y la verdad es que no se me ocurre como hacer para que se realice la sumatoria...

les dejo el código completo del añadir campos.... haber si me pueden echar una mano en esto, desde ya muchas gracias...

Código HTML:

Ver original<html>
<script type="text/javascript"> 
emails=0; 
function agregar() { 
    emails=emails+1; 
    $("#campos").append('<li class="email'+emails+'">  <input type="text" name="num1[]" id="num1[]" size="25" /><input type="text" name="num2[]" id="num2[]" size="25" /><a href="#" onclick="javascript:borrar('+emails+');">Borrar</a>    </li>'); 
} 
 
</script> 
</head>
<body>
 
    <form name="frm_multiple" method="post" action="procesar.php">
    <ul id="emails">
        <li>
        <input type="text" size="20" name="num1[]" id="num1[]" /><input type="text" size="20" name="num2[]" id="num2[]" /><a href="javascript:agregar();">Agregar</a>
        </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>

Saludos.

neveuster · #5 (**permalink**) 02/05/2012, 01:08

Amigos.... estuve mirando un ejemplo y al modificarlo me sirve pero lo malo es que no se hacerle para mostrar subtotales...

ahora como lo dejé está sumando todos los campos y poniendolos en un un campo unico de resultado final....

Lo que quisiera es que sume dos campos, el total lo deje en un tercero y finalmente haya un campo que reciba la suma de todos los totales...

dejo el código que hay que modificar... y desde ya muchas gracias.

Código HTML:

Ver original<html>
<head>
<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>
 
</head>
<body>
<form name="a" action="" method="post">
1:
  <input type="text" name="sum[]2" value="0" onKeyUp="sumar(this);" />
2:
<input type="text" name="sum[]" value="0" onkeyup="sumar(this);" />
tot:<input type="text" name="total" value="0" /><br />
 
1:<input type="text" name="sum[]" value="0" onkeyup="sumar(this);" />
2:<input type="text" name="sum[]" value="0" onkeyup="sumar(this);" />
tot:<input type="text" name="total" value="0" /><br />
 
5:<input type="text" name="sum[]" value="0" onkeyup="sumar(this);" />
6:<input type="text" name="sum[]" value="0" onkeyup="sumar(this);" />
tot:<input type="text" name="total" value="0" /><br /><br />
 
TOTAL:<input type="text" id="res" value="0" />
</form>
</body>
</html>