John Higgins John Higgins - 2 months ago 6
HTML Question

Adding two input boxes using Javascript

I am trying to add two already calculated and formatted input fields and not having much luck. My code is:

<input type='text' id='cage_linear_feet' value='83'>
<input type='text' id='cage_estimate' disabled>
<br>
<input type='text' id='cage_doors' value='3'>
<input type='text' id='doors_estimate' disabled>
<br>
<input type='text' id='cage_totals' disabled>
<script>
function format(n) {
return n.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,");
}

//Linear Feet Calculation

$(document).ready(LinearFeet);
document.getElementById('cage_linear_feet').addEventListener("keyup", LinearFeet);

var inputBox1 = document.getElementById('cage_linear_feet');

function LinearFeet(){
document.getElementById('cage_estimate').value = format(inputBox1.value*225);
}

//Doors Calculation

$(document).ready(CageDoors);
document.getElementById('cage_doors').addEventListener("keyup", CageDoors);

var inputBox2 = document.getElementById('cage_doors');

function CageDoors(){
document.getElementById('doors_estimate').value = format(inputBox2.value*1800);
}

</script>


How do I add cage_estimate and doors_estimate together and display in cage_totals in real time?

Thanks,

John

Answer

This is what you are asking

how to convert comma separated currency into number in java script

  parseFloat 

This function calculate total. You have to call it in each key functions.

  function setTotal(){
      var x=document.getElementById('doors_estimate').value;
      var y=document.getElementById('cage_estimate').value;

      if(x ){
        if(y){
            var z=(parseFloat(x.replace(',',''))+parseFloat(y.replace(',','')));            
            document.getElementById('cage_totals').value=format(z);
        }
      }
  }

calling codes

  function LinearFeet(){
    var inputBox1 = document.getElementById('cage_linear_feet');        
     document.getElementById('cage_estimate').value = format(inputBox1.value*225);
     setTotal();
  }


  function CageDoors(){
    var inputBox2 = document.getElementById('cage_doors');      
     document.getElementById('doors_estimate').value = format(inputBox2.value*1800);
     setTotal();
  }

Referances:

parseFloat

replace