Javascript form calculator?

  • chibuki
  • Novice
  • Novice
  • chibuki
  • Posts: 22

Post 3+ Months Ago

Can anyone teach me a simple way to make a javascript calculator, where if the user write an input in a text field, it would calculate the result in another field instantly without the need of a Submit button?

Here's the template I came up with

Code: [ Select ]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}
.itemcount {
    width: 50px;
    background-color: #ABB6C9;
}
.price {
    width: 35px;
    background-color: #FFFF66;
}
.totalprice {
    width: 65px;    
    background-color: #FB99AC;
}
.grandtotal {
    width: 100px;
    background-color: #CCCCCC;
}
input {
    height: 18px;
    margin-bottom: 2px;
}
-->
</style>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
 <label>Item 1</label>
 <input type="text" name="item1" id="item1" class="itemcount" /> x 5 = <input type="text" name="item1total" id="item1total" class="totalprice" />

 <br />
 <label>Item 2</label>
  <input type="text" name="item2" id="item2" class="itemcount" /> x 2 = <input type="text" name="item2total" id="item2total" class="totalprice"/>
 <br />
 <label>Item 3</label>
  <input type="text" name="item3" id="item3" class="itemcount" /> x <input type="text" name="item3multiply" id="item3multiply" class="price" /> = <input type="text" name="item3total" id="item3total" class="totalprice"/>

 <br />
 <label>Item 4</label>
  <input type="text" name="item4" id="item4" class="itemcount" /> x <input type="text" name="item4multiply" id="item4multiply" class="price" /> = <input type="text" name="item4total" id="item4total" class="totalprice"/>
 <br /><br />
  <label><strong>Grand Total:</strong> $
   <input type="text" name="grandtotal" id="grandtotal" class="grandtotal" />

 </label><br />
</form>
</body>
</html>
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>Untitled Document</title>
  5. <style type="text/css">
  6. <!--
  7. body {
  8.     font-family: Arial, Helvetica, sans-serif;
  9.     font-size: 12px;
  10. }
  11. .itemcount {
  12.     width: 50px;
  13.     background-color: #ABB6C9;
  14. }
  15. .price {
  16.     width: 35px;
  17.     background-color: #FFFF66;
  18. }
  19. .totalprice {
  20.     width: 65px;    
  21.     background-color: #FB99AC;
  22. }
  23. .grandtotal {
  24.     width: 100px;
  25.     background-color: #CCCCCC;
  26. }
  27. input {
  28.     height: 18px;
  29.     margin-bottom: 2px;
  30. }
  31. -->
  32. </style>
  33. </head>
  34. <body>
  35. <form id="form1" name="form1" method="post" action="">
  36.  <label>Item 1</label>
  37.  <input type="text" name="item1" id="item1" class="itemcount" /> x 5 = <input type="text" name="item1total" id="item1total" class="totalprice" />
  38.  <br />
  39.  <label>Item 2</label>
  40.   <input type="text" name="item2" id="item2" class="itemcount" /> x 2 = <input type="text" name="item2total" id="item2total" class="totalprice"/>
  41.  <br />
  42.  <label>Item 3</label>
  43.   <input type="text" name="item3" id="item3" class="itemcount" /> x <input type="text" name="item3multiply" id="item3multiply" class="price" /> = <input type="text" name="item3total" id="item3total" class="totalprice"/>
  44.  <br />
  45.  <label>Item 4</label>
  46.   <input type="text" name="item4" id="item4" class="itemcount" /> x <input type="text" name="item4multiply" id="item4multiply" class="price" /> = <input type="text" name="item4total" id="item4total" class="totalprice"/>
  47.  <br /><br />
  48.   <label><strong>Grand Total:</strong> $
  49.    <input type="text" name="grandtotal" id="grandtotal" class="grandtotal" />
  50.  </label><br />
  51. </form>
  52. </body>
  53. </html>


The blue box is where the user write the amount of the item. The red box and the grand total box should display the result (it probably shouldn't be shown in a text field).

For example, if I write 4 in the "Item 1" box, it would then multiplied by 5 and the result 20 (4 * 5 = 20) would automatically show up on the red box next to it.

For item 3, the user would have to manually write down how much Item 3 would be multiplied by in the yellow box.

Ultimately, the grand total box would display the sum of everything in the red box.

Would this be very complicating to make?

This is the closest example I can get:
www.lotsofcode.com/demo/form-calculation
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13503
  • Loc: Florida

Post 3+ Months Ago

It'll be a little easier if you wrap your static multipliers in an ID'd <span>.

HTML Code: [ Select ]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
}
.itemcount {
   width: 50px;
   background-color: #ABB6C9;
}
.price {
   width: 35px;
   background-color: #FFFF66;
}
.totalprice {
   width: 65px;  
   background-color: #FB99AC;
}
.grandtotal {
   width: 100px;
   background-color: #CCCCCC;
}
input {
   height: 18px;
   margin-bottom: 2px;
}
-->
</style>
 
<script type="text/javascript">
window.onload = function()
{
   var inputs = document.getElementsByTagName('input');
   for(var i = 0; i < inputs.length; i++)
   {
      if(/^item\d+$/i.test(inputs[i].id))
      {
         inputs[i].onkeyup = function()
         {
            var multiply = document.getElementById(this.id + 'multiply');
            multiply = multiply.value ? multiply.value : multiply.firstChild.nodeValue;
            document.getElementById(this.id + 'total').value = Math.max(0, parseInt(this.value)) * Math.max(0, parseInt(multiply));
         }
      }
      else if(/^item\d+multiply$/i.test(inputs[i].id))
      {
         inputs[i].onkeyup = function()
         {
            var count = document.getElementById(this.id.replace('multiply', '')).value
            document.getElementById(this.id.replace('multiply', 'total')).value = Math.max(0, parseInt(this.value)) * Math.max(0, parseInt(count));
         }
      }
   }
}
</script>
 
</head>
 
<body>
<form id="form1" name="form1" method="post" action="">
  <label>Item 1</label>
  <input type="text" name="item1" id="item1" class="itemcount" /> x <span id="item1multiply">5</span> = <input type="text" name="item1total" id="item1total" class="totalprice" />
 
  <br />
  <label>Item 2</label>
    <input type="text" name="item2" id="item2" class="itemcount" /> x <span id="item2multiply">2</span> = <input type="text" name="item2total" id="item2total" class="totalprice"/>
  <br />
  <label>Item 3</label>
    <input type="text" name="item3" id="item3" class="itemcount" /> x <input type="text" name="item3multiply" id="item3multiply" class="price" /> = <input type="text" name="item3total" id="item3total" class="totalprice"/>
 
  <br />
  <label>Item 4</label>
    <input type="text" name="item4" id="item4" class="itemcount" /> x <input type="text" name="item4multiply" id="item4multiply" class="price" /> = <input type="text" name="item4total" id="item4total" class="totalprice"/>
  <br /><br />
   <label><strong>Grand Total:</strong> $
     <input type="text" name="grandtotal" id="grandtotal" class="grandtotal" />
 
  </label><br />
</form>
</body>
</html>
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>Untitled Document</title>
  5. <style type="text/css">
  6. <!--
  7. body {
  8.    font-family: Arial, Helvetica, sans-serif;
  9.    font-size: 12px;
  10. }
  11. .itemcount {
  12.    width: 50px;
  13.    background-color: #ABB6C9;
  14. }
  15. .price {
  16.    width: 35px;
  17.    background-color: #FFFF66;
  18. }
  19. .totalprice {
  20.    width: 65px;  
  21.    background-color: #FB99AC;
  22. }
  23. .grandtotal {
  24.    width: 100px;
  25.    background-color: #CCCCCC;
  26. }
  27. input {
  28.    height: 18px;
  29.    margin-bottom: 2px;
  30. }
  31. -->
  32. </style>
  33.  
  34. <script type="text/javascript">
  35. window.onload = function()
  36. {
  37.    var inputs = document.getElementsByTagName('input');
  38.    for(var i = 0; i < inputs.length; i++)
  39.    {
  40.       if(/^item\d+$/i.test(inputs[i].id))
  41.       {
  42.          inputs[i].onkeyup = function()
  43.          {
  44.             var multiply = document.getElementById(this.id + 'multiply');
  45.             multiply = multiply.value ? multiply.value : multiply.firstChild.nodeValue;
  46.             document.getElementById(this.id + 'total').value = Math.max(0, parseInt(this.value)) * Math.max(0, parseInt(multiply));
  47.          }
  48.       }
  49.       else if(/^item\d+multiply$/i.test(inputs[i].id))
  50.       {
  51.          inputs[i].onkeyup = function()
  52.          {
  53.             var count = document.getElementById(this.id.replace('multiply', '')).value
  54.             document.getElementById(this.id.replace('multiply', 'total')).value = Math.max(0, parseInt(this.value)) * Math.max(0, parseInt(count));
  55.          }
  56.       }
  57.    }
  58. }
  59. </script>
  60.  
  61. </head>
  62.  
  63. <body>
  64. <form id="form1" name="form1" method="post" action="">
  65.   <label>Item 1</label>
  66.   <input type="text" name="item1" id="item1" class="itemcount" /> x <span id="item1multiply">5</span> = <input type="text" name="item1total" id="item1total" class="totalprice" />
  67.  
  68.   <br />
  69.   <label>Item 2</label>
  70.     <input type="text" name="item2" id="item2" class="itemcount" /> x <span id="item2multiply">2</span> = <input type="text" name="item2total" id="item2total" class="totalprice"/>
  71.   <br />
  72.   <label>Item 3</label>
  73.     <input type="text" name="item3" id="item3" class="itemcount" /> x <input type="text" name="item3multiply" id="item3multiply" class="price" /> = <input type="text" name="item3total" id="item3total" class="totalprice"/>
  74.  
  75.   <br />
  76.   <label>Item 4</label>
  77.     <input type="text" name="item4" id="item4" class="itemcount" /> x <input type="text" name="item4multiply" id="item4multiply" class="price" /> = <input type="text" name="item4total" id="item4total" class="totalprice"/>
  78.   <br /><br />
  79.    <label><strong>Grand Total:</strong> $
  80.      <input type="text" name="grandtotal" id="grandtotal" class="grandtotal" />
  81.  
  82.   </label><br />
  83. </form>
  84. </body>
  85. </html>
  • sajtosbeats
  • Born
  • Born
  • sajtosbeats
  • Posts: 1

Post 3+ Months Ago

and how can i get the "grandtotal" from this script?

Post Information

  • Total Posts in this topic: 3 posts
  • Users browsing this forum: No registered users and 163 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.