Calcular resultados en tiempo real en formulario

uplink

Hola.

Necesito hacer un formulario que a medida que se introduzcan valores (numéricos) el resultado se calcule automáticamente sin necesidad de pulsar ningún tipo de submit.

Apenas he tocado javascript y se que es lo que necesito.

Podríais darme alguna referencia o ejemplo similar?

Gracias!

unhide

Lo puedes hacer creando una función a la que llamas en el onKeyUp para que actualice los objetos que necesites...

scumah

Para hacer una suma de dos inputs, por ejemplo, sería algo así:

<head>
  <script language="javascript">
  function sumar()
  {
      var total = 0;
      var valor1 = document.getElementById("val1")
      var valor2 = document.getElementById("val2")

  total.value = parseInt(val1.value) + parseInt(val2.value);

  var Display = document.getElementById("Display");
  Display.innerHTML = total;
  }
  </script>
</head>
<body>
  <input id="val1" onkeyup="sumar()" />
  <input id="val2" onkeyup="sumar()" />
  <span id="Display"></span>
</body>
</html>

No lo he probado, y teniendo en cuenta que yo de JS más bien poco, a lo mejor no va fino, pero al menos te haces una idea :P

tOWERR

Lo puedes hacer también clickeando en otro botón que no sea un submit y ya ta. Le pones un boton con el evento Onclick que coja el valor de un text se lo pasas a la funcion y dentro de esa funcion en una variable donde pienso que almacenarás el total haces la operacion que sea con el valor introducido y con el total.

unhide

#3 Algo así creo que se puede hacer, en el onkeyup.

tOWERR

#3 y #5

Con un onkeyup cada vez que deje de pulsar una tecla va a ir actualizando, imaginar que quiere actualizar un numero de 3 cifras, si lo hace como le habeis dicho actualizaria cada vez que inserta una cifra. Lo que deberia hacer es al hacer por ejemplo un onKeyUp de la tecla "Enter", eso si que estaría bien. Nose si vosotros queriais decir algo asi o como e creido yo que lo abeis pensado.

scumah

Pues a mí no me parece mal que se actualice en el keyup. Creo que lo que precisamente no quiere es dar click en ningún sitio para tener que actualizar el resultado, es decir, que a medida que escribes se vaya viendo el resultado. Si como dices quisiera sumar sólo cuando hubiera 3 cifras, por ejemplo, se podría esperar a que el usuario haya metido tres cifras (comprobándolo en la función) para mostrar el resultado, así no tendría que darle a ningún botón.

Elektr0_ddr

#6 Lo mejor en estos casos es usar un setTimeout además del onKeyUp, así podremos hacer que cada vez que se pulse un número esperare un tiempo sin realizar el calculo y si no se ha introducido un nuevo numero, entonces realizarlo. Si ponemos un retraso para el calculo de 2 segs (2000 milisegundos), podremos introducir numeros largos sin que nos calcule en cada onKeyUp

sería algo así:

var timer; //Variable global para resetear el timeout si se pulsa un nuevo numero

<input id="val1" onkeyup="function(){clearTimeout(timer);timer=setTimeout('sumar()',2000)}" />
...

tOWERR

#8
Estoy de acuerdo contigo, con temporizador está bien hecho, pero como han dicho ellos no funcionaría bien porque cogeria cifra a cifra, nose si me entendeis.

scumah
spoiler

Eso está probado y funciona perfectamente xD

tOWERR

#10
Está bien, pero lo suyo seria que solamente se metiera en un text, y se fuera actualizando, ¿no?

neil90

Si quieres que lo calcule inmediatamente después de cada pulsación, onKeyUp es tu mejor opción. Hazte una función que recalcule los valores y se la pones al evento en todos los inputs que definan alguna variable.

Usuarios habituales

  • neil90
  • tOWERR
  • scumah
  • Elektr0_ddr
  • unhide
  • uplink