form fields calculator

Discussion in 'JavaScript' started by kaidoparv, Dec 30, 2010.

  1. #1
    is there any good example to make a javascript calculator which can calculate te total sum from quantity fields and checkboxes? i want to use it on the page www.doit-interactive.com

    for example i have to lines of data, each can have different quantity and 2 checkbox. increasing the quantity will increase the sum 10 EUR (for one line, second can have different sum), checking some checkboxes will increases the total sum too, but also all the checkboxes may have different sums, like 5 EUR, 0,5 EUR, 2,49 EUR etc

    some examples or ideas?
     
    kaidoparv, Dec 30, 2010 IP
  2. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Something like this:
    
    <html>
    <head>
    <script type="text/javascript">
    function doCalc() {
      var v1 = document.getElementById('value1').value * 10;
      if (document.getElementById('value2').checked) v1 = v1 + 1;
      if (document.getElementById('value3').checked) v1 = v1 + 2;
      var v2 = document.getElementById('value4').value * 10;
      if (document.getElementById('value5').checked) v2 = v2 + 1;
      if (document.getElementById('value6').checked) v2 = v2 + 2;
      document.getElementById('total').value = v1 + v2;
    }
    </script>
    <style type="text/css">
    button { width: 80px; }
    input { margin: 10px 0; }
    input[type='text'] { width: 50px; }
    </style>
    </head>
    <body>
    <div>
    <input id="value1" type="text" value="0" /> x 10<br />
    <input type="checkbox" id="value2" /> + 1
    <input type="checkbox" id="value3" /> + 2
    </div>
    <div>
    <input id="value4" type="text" value="0" /> x 10<br />
    <input type="checkbox" id="value5" /> + 1
    <input type="checkbox" id="value6" /> + 2
    </div>
    Tot: <input id="total" type="text" /><br />
    <button class="long" onclick="doCalc();">Calculate</button>
    </body> 
    </html>
    
    Code (markup):
     
    Cash Nebula, Dec 30, 2010 IP