Adding two input boxes using Javascript

Question

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 1

This is what you are asking

  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