Real time updating of values on a form

Slightly related to my other question (which was answered) here, I was wondering if the following was possible (it likely is and very basic but I'm a bit noobish at JavaScript)!

So I have 2 input fields where the user types something into a form. They press "calculate" and then the function totals up what they have entered and then calculates 1,2 and 3% for each value respectively. It looks something like this:

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

Is there a way for me to be able to update the form in real time? So by this I mean, as soon as the user enters a value into a field the function automatically starts updating the values such as total etc? How would I go about achieving this, can it be done purely in JavaScript?




If you want to display 'realtime' (meaningly, as the user types) values, you can use the keyup values :



Place an event handler on the onBlur event. If you had a Javascript function called calculateStuff(), your input element could reference it like this:

<input name="something" type="text" onblur="calculateStuff();" value="">

The onBlur event happens when the user leaves the field. If you want it to happen as they are still typing, you could use the onChange handler in the same way.

Yes. You should call an onkeyup / onchange event in JavaScript to determine if the user has typed anything and inside the event just have it call a JavaScript function which refreshes the form by doing the math and inserting the values.

You can also add other event listeners such as blur etc.

It has been a while so i cant post any usable code but Google is your friend here.

Without building a complete answer for you here are some hints:

pure javascript would require something like this using the .value from an element:


if you use a javascript library as for example jquery you can use something as .val()

edit: you can use the onchange event to process the changes

It's simple! Instead of using the button, add an onChange="your_calculate_function()" attribute to each of your inputs.

Need Your Help

WPF - Drag-drop - Adorner disappers outside the control

wpf drag-and-drop adorner

I'm using WPF to create two ListViews and implement drag-drop functionality. (both intra-listview and inter-listview)

ListView taking up all space, when trying to use an Admob Adview in Android

android listview layout adview

I am trying to get Google Admob advertisements to display on the main screen of an app that consists of a ListView. Unfortunately, the ListView is taking up all of the space on the screen, and then...