JavaScript real time validation and calculations 2 or more input text fields

Question

I want to do JavaScript real time calculations oninput, without the need for a submit button.

I know how to do real time calculations in JavaScript when I have 1 input text field. I use the oninput event for the input text field.

But what about when I have 2 text fields?

I want it to do something like this link, where it validates and calculates without the need for a submit button:

https://www.easycalculation.com/algebra/modulo-calculator.php

Take the following code for example:

// input
var a = document.getElementById("a").value; 
var b = document.getElementById("b").value;

// calculation
var result = a * b;

// display result
document.getElementById("result").value;

Since there are 2 input text fields (a and b), I want it to do the instant/real time calculations only AFTER the user has inputted valid data in BOTH text fields.

But I also want it to do real time calculations if the user changes either field. So if they input "a" and "b" it gives the results, but if they change "a" then it immediately gives new results without them having to touch "b" at all.

How do you suggest I go about doing this? Because I dont want the answer to keep showing up as Zero right after typing in the first text field. I want it to wait until both fields have numbers inputted and validated before it starts real time calculation. I will be adding validating code to this as well.

thanks

Answer 1

Just try and formulate your problem so that the computer can understand it.

I'll do just some pseudo-code. So you want to calculate something:

function calculate (valueA, valueB) {
    ... do something ...
    ... output result ...
}

You want to check, if both fields are valid, and only then do the calculation and output:

function checkFields (fieldA, fieldB) {
    if (fieldA.value.length > 0) { // if it is empty, there is no input
        ... do some additional checking ...
        if (fieldB.value.length > 0) { // if it is empty, there is no input
            ... do some additional checking ...
            ... if all went well: calculate (fieldA.value, fieldB.value);
        }
    }
}

then bind your checkFields to both input fields, and the computer understands.

Answer 2

you should write a function like validate() where you have to check the value of both the inpute fields if its valid then calculate result otherwise show a warning message above the field which is either empty or having wrong value

You have to call the validate function on onchange event of both the inputs

Answer 3

This is not exactly how I would write this in a production evvironment. but this should at least give you a good start for what you are looking for - very basic functionality you described.

<form>
    <input id='a' class='ab' type='text' name='valA'>
    <input id='b' class= 'ab' type='text' name='valB'>
</form>

// JS code below with this markup

var someCompositeGroup = document.getElementsByClassName("ab");

function validateForm(){

    // add stuff here 
    var inputVal = 0; 
    var aVal = someCompositeGroup[0] && someCompositeGroup[0].value;
    var bVal = someCompositeGroup[1] && someCompositeGroup[1].value;

    if (aVal && bVal && !isNaN(aVal) && !isNaN(bVal)) {
        inputVal = aVal * bVal; 
        // only update here - 
       console.log(inputVal);
    } else {
        console.log(' not ready to calculate yet '); 
    }
}

for (var i = 0; i < someCompositeGroup.length; i++) {
    someCompositeGroup[i].addEventListener('keyup', validateForm);
}