Actualización en tiempo real de valores en un formulario

Ligeramente relacionado con mi otra pregunta (que fue respondida) aquí , me preguntaba si lo siguiente era posible (¡es probable y muy básico, pero soy un poco novato en JavaScript)!

Entonces tengo 2 campos de entrada donde el usuario escribe algo en un formulario. Pulsan “calcular” y luego la función sum lo que han ingresado y luego calcula 1,2 y 3% para cada valor, respectivamente. Se ve algo como esto:

input 1%value
input 2%value
input 3%value
total total

¿Hay alguna manera de que pueda actualizar el formulario en tiempo real? Entonces, con esto quiero decir que, tan pronto como el usuario introduce un valor en un campo, la función comienza a actualizar automáticamente los valores, como el total, etc. ¿Cómo podría lograr esto, puede hacerse solo en JavaScript?

Gracias

Si desea mostrar los valores de “tiempo real” (es decir, como el usuario escribe), puede usar los valores de teclado:

Saludos,

Max

Coloque un controlador de eventos en el evento onBlur . Si tuviera una función de Javascript llamada calculateStuff() , su elemento de entrada podría hacer referencia a esto así:

  

El evento onBlur ocurre cuando el usuario abandona el campo. Si desea que suceda ya que todavía están escribiendo, puede usar el controlador onChange de la misma manera.

Sí. Debe llamar a un evento onkeyup / onchange en JavaScript para determinar si el usuario ha escrito algo y dentro del evento simplemente haga que llame a una función de JavaScript que actualice el formulario haciendo los cálculos e insertando los valores.

También puede agregar otros detectores de eventos como borrosidad, etc.

Ha pasado un tiempo, así que no puedo publicar ningún código utilizable, pero Google es tu amigo aquí.

Sin construir una respuesta completa para usted aquí hay algunos consejos:

javascript puro requeriría algo como esto usando el valor .value de un elemento:

 alert(document.getElementById('elementid').value); 

si usa una biblioteca de JavaScript, como por ejemplo jquery, puede usar algo como .val ()

editar: puede usar el evento onchange para procesar los cambios

¡Es sencillo! En lugar de usar el botón, agregue un onChange="your_calculate_function()" a cada una de sus entradas.