Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

138
Views
How do I add two numbers and them multiply it with the 3rd number and show the total in a disabled input in a html form with javascript?
This is the html code: 

the id's are : num1, num2, num3 and the total input is "total" I want the calc function to be (num1+num2)*num3

<div class="row">
    <div class="col">
    <label> Tarif Colet</label>
      <input type="num1" onfocus="calculare()" onkeyup="calculare()" onclick="calculare()" onblur="calculare()"  value="0" id="tarifcolet" id="num1"  class="form-control" placeholder="Tarif Colet">
      
    </div>
<div class="col">
      <label>Alte Taxe</label>
      <input type="num2" value="0" onfocus="calculare()" onkeyup="calculare()" onclick="calculare()" onblur="calculare()" id="num2"  class="form-control" placeholder="Alte Taxe">
    </div>
<div class="col">
    <label>Tva</label>
      <input type="percent" name="num3" id="num3" value="19%"  class="form-control" placeholder="TVA">
</div>
    <div class="col">
    <label>Total</label>
      <input type="number" name="total" disabled="disabled" id="total" class="form-control" placeholder="total">
    </div>
about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

You can assign a value to a disabled input box using the same property you read:

function calculare() { 
  var num1 = parseFloat(document.getElementById('num1').value); 
    var num2 = parseFloat(document.getElementById('num2').value);
    var num3 = parseFloat(document.getElementById('num3').value);
    document.getElementById("total").value = ((num1 + num2) * num3/100).toFixed(2);
}

Fiddle here: https://jsfiddle.net/9s1d2nac/1/

(In the fiddle I fixed the duplicate inputs you've assigned to the first input, leaving only "num1" as the id.)

about 4 years ago · Juan Pablo Isaza Report

0

Use return method.

function myFunction(a, b, c) {
 return (a+b)*c;
}

And then add in a button onclick event (you can use in other events too).

<div class="row">
    <div class="col">
    <label> Tarif Colet</label>
      <input type="num1" onfocus="calculare()" onkeyup="calculare()" onclick="calculare()" onblur="calculare()"  value="0" id="tarifcolet" id="num1"  class="form-control" placeholder="Tarif Colet">
      
    </div>
<div class="col">
      <label>Alte Taxe</label>
      <input type="num2" value="0" onfocus="calculare()" onkeyup="calculare()" onclick="calculare()" onblur="calculare()" id="num2"  class="form-control" placeholder="Alte Taxe">
    </div>
<div class="col">
    <label>Tva</label>
      <input type="percent" name="num3" id="num3" value="19%"  class="form-control" placeholder="TVA">
</div>
    <div class="col">
    <label>Total</label>
      <input type="number" name="total" disabled="disabled" id="total" class="form-control" placeholder="total">
    </div>
<button type="button" onclick="getValue() ">
function getValue(){
 var num1 = document.getElementById("num1").value;
var num2 = document.getElementById("num2").value;
var num3 = document.getElementById("num3").value;
var displayResult = document.getElementById("total");
var result = myFunction(num1, num2, num3);

displayResult.value = result;
}

I hope this works

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!