How to multiple two input and addition the third input on keypress

Question

How to multiply two input and addition the third input on keypress I have a Three input field need to multiple first two input and addition of third input then show the result field HTML code:

<input type="text" tabindex="3" class="form-control" name="making_charge" oninput="calculate()" placeholder="Making Charge" id="box3" required />

 <input type="text" tabindex="3" class="form-control" name="total_price" placeholder="Total Price" id="result" readonly  />

function calculate() {
        var myBox1 = document.getElementById('box1').value; 
        var myBox2 = document.getElementById('box2').value;
        var myBox3 = document.getElementById('box3').value;
        var result = document.getElementById('result'); 
        var myResult = myBox1 * myBox2 + myBox3;
        result.value = myResult; 
    }

Please at least _tag_ appropriately – this has nothing whatsoever to do with `php`. (Tags edited.) — misorude, Sep 13 '19 at 11:58
You seem to have the basic parts there already (the usual addition-of-strings issue is probably not present here to begin with, because it starts with a multiplication), so what is the actual _problem_ now? Please go read [ask] and give proper problem descriptions, instead of asking “how to” questions. — misorude, Sep 13 '19 at 12:00
var myResult = myBox1 * myBox2 + myBox3; Is this Correct or not? — kesavan, Sep 13 '19 at 12:08
@kesavan so what is your actual problem which you did not state in your question. — epascarello, Sep 13 '19 at 12:14
But what is wrong with your code? ;) That is all we are trying to get you to say. You never stated the problem you have. We are guessing what your issue is. — epascarello, Sep 13 '19 at 12:20

score 0 · Accepted Answer · answered Sep 13 '19 at 12:20

Well value is a string so you need to covert it to a number to do mathematical operations on it.

You can do it with a +, Number(), parseInt(), parseFloat()

function calculate() {
  var myBox1 = +document.getElementById('box1').value;
  var myBox2 = +document.getElementById('box2').value;
  var myBox3 = +document.getElementById('box3').value;
  var result = document.getElementById('result');
  var myResult = myBox1 * myBox2 + myBox3;
  result.value = myResult;
}

<input type="text" tabindex="3" class="form-control" name="making_charge" oninput="calculate()" placeholder="Making Charge" id="box1" required />

<input type="text" tabindex="3" class="form-control" name="making_charge" oninput="calculate()" placeholder="Making Charge" id="box2" required />

<input type="text" tabindex="3" class="form-control" name="making_charge" oninput="calculate()" placeholder="Making Charge" id="box3" required />

<input name="total_price" placeholder="Total Price" id="result" readonly />

How to multiple two input and addition the third input on keypress

1 Answers1