Home / Questions / 30369
Accepted
Efrain Mejias C
Asked: 2020-10-29 03:27:58 +0800 CST 2020-10-29 03:27:58 +0800 CST

How to get the value entered in an HTML Text field?

  • 772

I need to insert an Amount in a text field ... when I leave that field, I must calculate the tax on that amount (tax = amount * 0.12) also the total ( total = amount + tax) and set these values ​​in other fields of text automatically.

HTML code

<input type="text" id="Monto" name="Monto" placeholder="Monto" onchange="CalculoIva()" required />
<input type="text" id="Iva" name="Iva" placeholder="Iva"  required />
<input type="text" id="Total" name="Total" placeholder="Total"  required />

I'm trying this but it doesn't work

 <script lang="javascript" type="text/javascript">
       var monto = 0;
       onchange = CalculoIva();
       function CalculoIva() {
           monto = document.getElementById('Monto').innerText ;
           var iva = parseFloat(monto) * 0.12;
           var total = parseFloat(monto) + parseFloat(iva);
           document.getElementById("Iva").innerHTML = iva.toString();
           document.getElementById("Total").innerHTML = total.toString();
       }
   </script>
javascript

2 Answers

  1. you should do something like this

    function CalculoIva() {
    var monto = document.getElementById('Monto').value;
    if(isNaN(monto)){
        alert("Introduce un numero, por favor");
        document.getElementById('Monto').value = "";
    }else{
        var iva = parseFloat(monto) * 0.12;
        var total = parseFloat(monto) + parseFloat(iva);
        document.getElementById("Iva").value = iva;
        document.getElementById("Total").value = total;
    }
};
    <input type="text" id="Monto" name="Monto" placeholder="Monto" onChange="CalculoIva();" required />
<input type="text" id="Iva" name="Iva" placeholder="Iva" required />
<input type="text" id="Total" name="Total" placeholder="Total" required />

    • 3
  2. Best Answer

    I have refactored the code from sioesi 's answer a bit

    • Removed inline javascript in HTML
    • The inputs: ivaand totalchanged toreadonly
    • The function CalculoIva()is now reusable
    • Check if the value of montois numeric
    • Reset all fields if it is not a valid number
    • Changed the point by comma (European Standard)
    • Result format ivaand totalto 2 decimals (0.00)

    function CalculoIva(monto, iva, total) {
  
  montoParse = parseFloat(monto.value);
  
  if (typeof montoParse === 'number' && !isNaN(montoParse)) {
    
      var ivaCalc   = montoParse * 0.12;
      var totalCalc = montoParse + ivaCalc;
    
      iva.value   = ivaCalc.toFixed(2).replace('.', ',');
      total.value = totalCalc.toFixed(2).replace('.', ',');
    
  } else {
    
      iva.value   = '';
      total.value = '';
      monto.value = '';
      console.log('Introduce un numero válido');
  }
}

var monto = document.getElementById('Monto');
var iva   = document.getElementById('Iva');
var total = document.getElementById('Total');


monto.onchange = function(){ CalculoIva(monto, iva, total); }
    <input type="text" id="Monto" name="Monto" placeholder="Monto" required>
<input type="text" id="Iva" name="Iva" placeholder="Iva"  readonly>
<input type="text" id="Total" name="Total" placeholder="Total" readonly>

    • 3