title: subtotals and grand total in js invoice
body: <p>I can't figure out how to do what I want to, so I'll do it the ugly way.</p>
  
  <p>I have been trying for a week to get this invoice system done with JS, I am stuck.</p>
  
  <p>I have been able to get <code>price per * quantity = subtotal</code> to work, but only for one line, I need to add 3 more lines for the invoice but have absolutely no idea how to incorporate the other 3 lines, each one with <code>price per * quantity = subtotal</code>, then all 4 subtotals from that column summed together in the TOTAL span, I will post all the code here.</p>
  
  <p><strong>JavaScript:</strong></p>
  
  <pre><code>var item = document.getElementById('item');
  var a = document.getElementById('price');
  var a = document.getElementById('qty');
  item.onchange = function() {
      price.innerHTML = "$" + this.value;
      qty.value = 1; //Order 1 by default.
      add();
  };
  qty.onchange = function() {
      add();
  }
  
  function add() {
      var a = document.getElementById('item').value,
          b = document.getElementById('qty').value;
  
      document.getElementById('result').innerHTML = "$" + (a * b);
      document.getElementById('Total').innerHTML = "$" + (a * b) * 1.06;
  }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;form name="frm"&gt;
  &lt;p&gt;&lt;img src="strata/longwaylogoblk.png" width="230" height="50"&gt;&lt;/p&gt;
  &lt;p&gt;Customer Invoice&lt;/p&gt;
  
  &lt;table width="38%" border="0"&gt;
    &lt;tr&gt;
      &lt;td width="31%"&gt;&lt;div align="left"&gt;Eclipse Cellular&lt;/div&gt;&lt;/td&gt;
      &lt;td width="23%"&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td width="10%"&gt;Name&lt;/td&gt;
      &lt;td width="36%"&gt;&amp;nbsp;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;div align="left"&gt;2441 Foothill Blvd #1143&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;Address&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;div align="left"&gt;Rock Springs, WY, 82901&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;Phone&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;div align="left"&gt;307-212-6886&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;Email&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  &lt;br /&gt;
  &lt;br /&gt;
  
  &lt;table id="invoice" width="43%" border="0"&gt;
    &lt;tr bgcolor="#B80000"&gt;
      &lt;td width="9%"&gt;&lt;div align="center"&gt;ID&lt;/div&gt;&lt;/td&gt;
      &lt;td width="31%"&gt;
        &lt;div align="center"&gt;Item Description&lt;/div&gt;
      &lt;/td&gt;
      &lt;td width="17%"&gt;
        &lt;div align="center"&gt;Price Per&lt;/div&gt;
      &lt;/td&gt;
      &lt;td width="13%"&gt;
        &lt;div align="center"&gt;Quantity&lt;/div&gt;
      &lt;/td&gt;
      &lt;td width="13%"&gt;
        &lt;div align="center"&gt;SubTotal&lt;/div&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;div align="center"&gt;1&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;
        &lt;div align="center"&gt;
          &lt;select name="item" id="item" size="1"&gt;
            &lt;option value=""&gt;Device&lt;/option&gt;
            &lt;option value="200"&gt;iPhone 4&lt;/option&gt;
            &lt;option value="300"&gt;iPhone 4S&lt;/option&gt;
            &lt;option value="450"&gt;iPhone 5&lt;/option&gt;
            &lt;option value="300"&gt;Galaxy S3&lt;/option&gt;
            &lt;option value="450"&gt;Galaxy S4&lt;/option&gt;
            &lt;option value="450"&gt;Galaxy Note ll&lt;/option&gt;
            &lt;option value="600"&gt;Galaxy Note lll&lt;/option&gt;
            &lt;option value="700"&gt;Galaxy S5&lt;/option&gt;
            &lt;option value="500"&gt;HTC One&lt;/option&gt;
            &lt;option value="650"&gt;HTC One M8&lt;/option&gt;
          &lt;/select&gt;
        &lt;/div&gt;
      &lt;/td&gt;
      &lt;td height="43"&gt;
        &lt;div align="center"&gt;&lt;span id="price"&gt;&lt;/span&gt;&lt;/div&gt;
      &lt;/td&gt;
      &lt;td&gt;
        &lt;div align="center"&gt;
          &lt;input name="qty" type="Text" id="qty" size="2" maxlength="3"/&gt;
        &lt;/div&gt;
      &lt;/td&gt;
  
      &lt;td&gt;
        &lt;div align="center"&gt;
          &lt;span id="result"&gt;&lt;/span&gt;
        &lt;/div&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;div align="center"&gt;2&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;
        &lt;div align="center"&gt;
          &lt;select name="item1" id="item1" size="1"&gt;
            &lt;option value=""&gt;Device&lt;/option&gt;
            &lt;option value="200.00"&gt;iPhone 4&lt;/option&gt;
            &lt;option value="300.00"&gt;iPhone 4S&lt;/option&gt;
            &lt;option value="450.00"&gt;iPhone 5&lt;/option&gt;
            &lt;option value="300.00"&gt;Galaxy S3&lt;/option&gt;
            &lt;option value="450.00"&gt;Galaxy S4&lt;/option&gt;
            &lt;option value="450.00"&gt;Galaxy Note ll&lt;/option&gt;
            &lt;option value="600.00"&gt;Galaxy Note lll&lt;/option&gt;
            &lt;option value="700.00"&gt;Galaxy S5&lt;/option&gt;
            &lt;option value="500.00"&gt;HTC One&lt;/option&gt;
            &lt;option value="650.00"&gt;HTC One M8&lt;/option&gt;
          &lt;/select&gt;
        &lt;/div&gt;
      &lt;/td&gt;
      &lt;td height="43"&gt;
        &lt;div align="center"&gt;&lt;span id="price1"&gt;&lt;/span&gt;&lt;/div&gt;
      &lt;/td&gt;
      &lt;td&gt;
        &lt;div align="center"&gt;
          &lt;input name="qty1" type="Text" id="qty1" size="2" maxlength="3"/&gt;
        &lt;/div&gt;
      &lt;/td&gt;
  
      &lt;td&gt;
        &lt;div align="center"&gt;
          &lt;span id="result1"&gt;&lt;/span&gt;
        &lt;/div&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;div align="center"&gt;3&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;
        &lt;div align="center"&gt;
          &lt;select name="item2" id="item2" size="1"&gt;
            &lt;option value=""&gt;Service&lt;/option&gt;
            &lt;option value="35.00"&gt;Activation&lt;/option&gt;
            &lt;option value="20.00"&gt;ESN Change&lt;/option&gt;
            &lt;option value="20.00"&gt;Number Change&lt;/option&gt;
            &lt;option value="60.00"&gt;Flashing&lt;/option&gt;
            &lt;option value="25.00"&gt;Discount Activation&lt;/option&gt;
            &lt;option value="5.00"&gt;Rent To Own Late Fee&lt;/option&gt;
            &lt;option value="150.00"&gt;R2O Down Payment&lt;/option&gt;
          &lt;/select&gt;
        &lt;/div&gt;
      &lt;/td&gt;
      &lt;td height="43"&gt;
        &lt;div align="center"&gt;&lt;span id="price2"&gt;&lt;/span&gt;&lt;/div&gt;
      &lt;/td&gt;
      &lt;td&gt;
        &lt;div align="center"&gt;
          &lt;input name="qty2" type="Text" id="qty2" size="2" maxlength="3"/&gt;
        &lt;/div&gt;
      &lt;/td&gt;
  
      &lt;td&gt;
        &lt;div align="center"&gt;&lt;span id="result2"&gt;&lt;/span&gt;&lt;/div&gt;
      &lt;/td&gt;
      &lt;td&gt;
  
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;div align="center"&gt;4&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;
        &lt;div align="center"&gt;
          &lt;select name="item3" id="item3" size="1"&gt;
            &lt;option value=""&gt;Airtime&lt;/option&gt;
            &lt;option value="12.00"&gt;PagePlus The 12&lt;/option&gt;
            &lt;option value="29.95"&gt;PagePlus Talk n Text 1200&lt;/option&gt;
            &lt;option value="39.95"&gt;PagePlus Unlimited Talk n Text&lt;/option&gt;
            &lt;option value="55.00"&gt;PagePlus The 55&lt;/option&gt;
            &lt;option value="69.95"&gt;PagePlus Super User&lt;/option&gt;
            &lt;option value="10.00"&gt;10 Cash PIN&lt;/option&gt;
            &lt;option value="25.00"&gt;25 Cash PIN&lt;/option&gt;
            &lt;option value="50.00"&gt;50 Cash PIN&lt;/option&gt;
            &lt;option value="80.00"&gt;80 Cash PIN&lt;/option&gt;
            &lt;option value="5.00"&gt;International (X$5)&lt;/option&gt;
          &lt;/select&gt;
        &lt;/div&gt;
      &lt;/td&gt;
      &lt;td height="43"&gt;
        &lt;div align="center"&gt;&lt;span id="price3"&gt;&lt;/span&gt;&lt;/div&gt;
      &lt;/td&gt;
      &lt;td&gt;
        &lt;div align="center"&gt;
          &lt;input name="qty3" type="Text" id="qty3" size="2" maxlength="3"/&gt;
        &lt;/div&gt;
      &lt;/td&gt;
  
      &lt;td&gt;
        &lt;div align="center"&gt;&lt;span id="result3"&gt;&lt;/span&gt;&lt;/div&gt;
      &lt;/td&gt;
      &lt;td&gt;
  
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;tr&gt;
        &lt;tr&gt;
          &lt;td&gt;&lt;div align="center"&gt;&lt;/div&gt;&lt;/td&gt;
          &lt;td&gt;&lt;div align="center"&gt;&lt;/div&gt;&lt;/td&gt;
          &lt;td height="44"&gt;
            &lt;div align="center"&gt;&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;div align="center"&gt;&lt;font color="#336699" size="3"&gt;&lt;b&gt;TOTAL:&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;div align="center"&gt;&lt;span id="Total"&gt;&lt;/span&gt;&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
  
          &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;&amp;nbsp;&lt;/td&gt;
          &lt;td&gt;&lt;div align="center"&gt;&lt;/div&gt;&lt;/td&gt;
          &lt;td height="44"&gt;&lt;div align="right"&gt;
            &lt;input type="button" value="Exit" onclick="window.location.reload();" /&gt;
          &lt;/div&gt;&lt;/td&gt;
          &lt;td&gt;&lt;div align="right"&gt;
            &lt;input name="add" type="button" value="Add Row" onclick="addRow('invoice')"/&gt;
          &lt;/div&gt;&lt;/td&gt;
          &lt;td&gt;&lt;div align="center"&gt;
              &lt;input name="save" type="button" value="Save" /&gt;
          &lt;/div&gt;&lt;/td&gt;
          &lt;td&gt;&amp;nbsp;&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I know I have the TOTAL span wrong, but you get the idea, working version <a href="http://jsfiddle.net/gomoguy/eCu39/4/" rel="nofollow">here</a></p>