Foros del Web » Programando para Internet » Jquery »

Operaciones en campos input con Jquery

Estas en el tema de Operaciones en campos input con Jquery en el foro de Jquery en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 01/05/2012, 02:18
 
Fecha de Ingreso: febrero-2012
Mensajes: 163
Antigüedad: 12 años, 1 mes
Puntos: 0
Operaciones en campos input con Jquery

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.
  #2 (permalink)  
Antiguo 01/05/2012, 03:07
Avatar de santris  
Fecha de Ingreso: agosto-2009
Ubicación: Sant Feliu de Llobregat
Mensajes: 955
Antigüedad: 14 años, 7 meses
Puntos: 66
Respuesta: Operaciones en campos input con Jquery

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

Copiar pegar y probar:
Cita:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" >

$(document).ready(function(){
$("#num1").keyup(function(){
var texto_escrito = parseInt($("#num1").val()) + parseInt($("#num2").val());
$("#un_div").html(texto_escrito);
})
$("#num2").keyup(function(){
var texto_escrito = parseInt($("#num1").val()) + parseInt($("#num2").val());
$("#un_div").html(texto_escrito);
})
})
</script>

<form>
<input type="text" name="num1" id="num1" maxlength="4" />
<input type="text" name="num2" id="num2" maxlength="4" />
</form>
<br />
<div id="un_div" style="background-color:#FFC; padding:12px">_</div>
fuente origen: http://www.forosdelweb.com/f13/actua...-input-895445/
__________________
Tu álbum de cromos online!!
  #3 (permalink)  
Antiguo 01/05/2012, 23:39
 
Fecha de Ingreso: febrero-2012
Mensajes: 163
Antigüedad: 12 años, 1 mes
Puntos: 0
Respuesta: Operaciones en campos input con Jquery

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.
  #4 (permalink)  
Antiguo 02/05/2012, 00:21
 
Fecha de Ingreso: febrero-2012
Mensajes: 163
Antigüedad: 12 años, 1 mes
Puntos: 0
Respuesta: Operaciones en campos input con Jquery

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
  1. <script type="text/javascript">
  2. emails=0;
  3. function agregar() {
  4.     emails=emails+1;
  5.     $("#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>');
  6. }
  7.  
  8. </script>
  9. </head>
  10.  
  11.     <form name="frm_multiple" method="post" action="procesar.php">
  12.     <ul id="emails">
  13.         <li>
  14.         <input type="text" size="20" name="num1[]" id="num1[]" /><input type="text" size="20" name="num2[]" id="num2[]" /><a href="javascript:agregar();">Agregar</a>
  15.         </li>
  16.         <li id="campos"><!-- aqui se crean los CAMPOS --></li>
  17.     </ul>
  18.    
  19.     <p align="center"><input type="submit" name="Send" value="Send" /></p>
  20.     </form>
  21.  
  22. </body>
  23. </html>

Saludos.

Última edición por neveuster; 02/05/2012 a las 00:55
  #5 (permalink)  
Antiguo 02/05/2012, 01:08
 
Fecha de Ingreso: febrero-2012
Mensajes: 163
Antigüedad: 12 años, 1 mes
Puntos: 0
Respuesta: Operaciones en campos input con Jquery

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
  1. <script type="text/javascript">
  2. function sumar(c){
  3. var subtotal = 0;
  4. campo = c.form;
  5.   if(!/^\d*$/.test(c.value)) return;
  6.  
  7.       for (var i = 0; i < campo.length-1; i++) {
  8.          if (!/^\d+$/.test(campo[i].value)) continue;
  9.              subtotal += parseInt(campo[i].value);
  10.      }
  11. document.getElementById('res').value = subtotal;
  12. }
  13.  
  14. </head>
  15. <form name="a" action="" method="post">
  16. 1:
  17.   <input type="text" name="sum[]2" value="0" onKeyUp="sumar(this);" />
  18. 2:
  19. <input type="text" name="sum[]" value="0" onkeyup="sumar(this);" />
  20. tot:<input type="text" name="total" value="0" /><br />
  21.  
  22. 1:<input type="text" name="sum[]" value="0" onkeyup="sumar(this);" />
  23. 2:<input type="text" name="sum[]" value="0" onkeyup="sumar(this);" />
  24. tot:<input type="text" name="total" value="0" /><br />
  25.  
  26. 5:<input type="text" name="sum[]" value="0" onkeyup="sumar(this);" />
  27. 6:<input type="text" name="sum[]" value="0" onkeyup="sumar(this);" />
  28. tot:<input type="text" name="total" value="0" /><br /><br />
  29.  
  30. TOTAL:<input type="text" id="res" value="0" />
  31. </form>
  32. </body>
  33. </html>

Etiquetas: campos, formulario, html, input, operaciones
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.
Respuesta




La zona horaria es GMT -6. Ahora son las 07:27.