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

Sanka · Accepted Answer · 2016-09-19 15:37:33Z

1

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

edited Sep 19, 2016 at 15:37

answered Sep 19, 2016 at 15:29

Sanka

1,3241 gold badge11 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

John Higgins Over a year ago

Brilliant! Thanks. How do I get the cage_totals to show in as a div? E.g. <div id="cage_totals"></div>

Sanka Over a year ago

@JohnHiggins document.getElementById("divID").innerHTML=format(z);

John Higgins Over a year ago

Great, thanks Sanka. Just worked it out but you updated the post before I got to it! Thanks again.

Collectives™ on Stack Overflow

Adding two input boxes using Javascript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related