Display a calculated field realtime

Hi,

I am trying a simple calculator as a first foray into Wix code. I have the following scenario:

I have the following fields:

Value
Value1
Markupdown

I want to enter Value & Value1 and the result of Value*Value1 to be displayed and stored in Markupdown. I can get the calculation to work, but it only displays once i click on save (linked button as submit)

this is the hook i have created:

export function TestDB_beforeInsert(item, context) {
//TODO: write your code here…

item.markupdown = item.value1 * item.value; 

return item;

}

The form has a input box for Value another for Value1. It has a readonly displaybox for markupdown, i want it to update the markupdown field as soon as one of the others is changed, without having to save it?

sorry for the noob question

Hello,

The hook is not needed in this situation and all the code can be written in the page code. you would need to add two onChange events, one for each input field, this event watches for a value change on the input and runs the code inside when the event triggers. In this case the code that runs, multiplies the two values and sets the result as the value for the markupdown field you have.

$w(‘#input’).onChange(()=>{
let result = $w(‘#input’).value * $w(‘#input1’).value;
$w(‘#Markupdown’).value = result;
})

$w(‘#input1’).onChange(()=>{
let result = $w(‘#input’).value * $w(‘#input1’).value;
$w(‘#Markupdown’).value = result;
})

Hope this helps,
Majd

Hi Majid, Thanks for that, very useful. I implemented it and it works, i tried to expand it to include a fourth calculation:

export function input1_change(event) {
$w(‘#input1’).onChange(() => {
let result = ($w(‘#input1’).value * $w(‘#input2’).value) / 100;
$w(‘#input3’).value = result;
let FV = (($w(‘#input1’).value * $w(‘#input2’).value) / 100) + $w(‘#input1’);
$w(‘#input4’).value = FV;

}) 

$w('#input2').onChange(() => { 

let result = ($w(‘#input1’).value * $w(‘#input2’).value) / 100;
$w(‘#input3’).value = result;
let FV = (($w(‘#input1’).value * $w(‘#input2’).value) / 100) + $w(‘#input1’);
$w(‘#input4’).value = FV;

but it wont display the 4th value? help!