title: Using toFixed in the right place
body: <p>I have a form which outputs a calculation from an input field and a drop down.  </p>
  
  <p>The script is fine apart from the grand total.  When you type in a figure and select a value from the drop down, the grand total is rounded to 2 decimal places in the html.</p>
  
  <p>Can anyone see why this is happening?</p>
  
  <p>The form is below:</p>
  
  <pre><code>&lt;input type="text" name="amount" id="amount" maxlength="6" autocomplete="off"/&gt;&lt;span class="paymentalert" style="color:red;"&gt;&lt;/span&gt;
  &lt;br /&gt;&lt;br /&gt;
  &lt;label for="delivery"&gt;Delivery:&lt;/label&gt;
  &lt;select id="delivery" name="delivery"&gt;
      &lt;option value="1.50"&gt;Fast&lt;/option&gt;
      &lt;option value="2.50"&gt;Medium&lt;/option&gt;
      &lt;option value="3.50"&gt;Slow&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>The javascript is below:</p>
  
  <pre><code>function updateCost()
  {
      var amount = parseFloat($('#amount').val()).toFixed(2);
      var delivery = parseFloat($('#delivery').val()).toFixed(2);   
  
      var total = parseFloat(amount) + parseFloat(delivery);
      $("#total").html(total);
      $("#amountdiv").html(amount);
      $("#deliverydiv").html(delivery);
  
      var fixedrate =  parseFloat(total / 100 * 8.2).toFixed(2);
  
      var grandtotal = parseFloat(fixedrate) + parseFloat(total);
      $("#grandtotal").html(grandtotal);
      $("#total").html(total);
      $("#fixedrate").html(fixedrate);    
  
  }
  
  $(document).ready(function(){
      $('#amount').change(function(){ updateCost(); });
      $('#delivery').change(function(){ updateCost(); });
      $('#grandtotal').change(function(){ updateCost(); });
  }); 
  </code></pre>