checkbox: Calculate total with check boxes included?

vendredi 1 avril 2016

Calculate total with check boxes included?

I'm currently working on a shopping cart that auto calculates the total as the consumer selects certain options. I'm currently stuck on the check boxes and how to add a dollar amount to them, then have it auto calculate once checked. As you can see, it's successfully calculating everything, until you get to the check boxes. Thanks in advance for your help!

var removedItem,
    sum = 0;

$(function(){
  // calculate the values at the start
  calculatePrices();
  
  // Click to remove an item
  $(document).on("click", "a.remove", function() {
      removeItem.apply(this);
  });
  
  // Undo removal link click
  $(document).on("click", ".removeAlert a", function(){    
    // insert it into the table
    addItemBackIn();
    //remove the removal alert message
    hideRemoveAlert();
  });
  
  $(document).on("change", "input.quantity", function(){
    var val = $(this).val(),
        pricePer,
        total
    
    if ( val <= "0") {
      removeItem.apply(this);
    } else {
      // reset the prices
      sum = 0;
      
      // get the price for the item
      pricePer = $(this).parents("td").prev("td").text();
      // set the pricePer to a nice, digestable number
      pricePer = formatNum(pricePer);
      // calculate the new total
      total = parseFloat(val * pricePer).toFixed(2);
      // set the total cell to the new price
      $(this).parents("td").siblings(".itemTotal").text("$" + total);
      
      // recalculate prices for all items
      calculatePrices();
    }
  });
  
});


function removeItem() {
 // store the html
  removedItem = $(this).closest("tr").clone();
  // fade out the item row
  $(this).closest("tr").fadeOut(500, function() {
    $(this).remove();
    sum = 0;
    calculatePrices();
  });
  // fade in the removed confirmation alert
  $(".removeAlert").fadeIn();
  
  // default to hide the removal alert after 5 sec
  setTimeout(function(){
    hideRemoveAlert();
  }, 5000); 
}

function hideRemoveAlert() {
  $(".removeAlert").fadeOut(500);
}

function addItemBackIn() {
  sum = 0;
  $(removedItem).prependTo("table.items tbody").hide().fadeIn(500) 
  calculatePrices();
}

function updateSubTotal(){
  $("table.items td.itemTotal").each(function(){
    var value = $(this).text();
    // set the pricePer to a nice, digestable number
    value = formatNum(value);

    sum += parseFloat(value);
    $("table.pricing td.subtotal").text("$" + sum.toFixed(2));
  });
}

function addTax() {
  var tax = parseFloat(sum * 0.13).toFixed(2);
  $("table.pricing td.tax").text("$" + tax);
}

function calculateTotal() {
  var subtotal = $("table.pricing td.subtotal").text(),
      tax = $("table.pricing td.tax").text(),
      post = $("table.pricing td.post").text(),
      total;
  
  subtotal = formatNum(subtotal);
  tax = formatNum(tax);
  post = formatNum(post);
   
  total = (subtotal + tax + post).toFixed(2);
  
  $("table.pricing td.orderTotal").text("$" + total);
}

function calculatePrices() {
  updateSubTotal();
  addTax();
  calculateTotal();
}

function formatNum(num) {
  return parseFloat(num.replace(/[^0-9-.]/g, ''));
}

<html >
  <head>
    <meta charset="UTF-8">
    <title>TITLE</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    <link rel="stylesheet" href="styles/cartnormalize.css">

    <link rel='stylesheet prefetch' href='http://ift.tt/1eUVvO0'>

        <link rel="stylesheet" href="styles/cartstyle.css">
  </head>





  <body>

    <div class="content">
  <h1>Service Name</h1>
  
  <p class="removeAlert">
    Item has been removed. Made a mistake? <a href="#">Undo removal</a>
  </p>

  
  
<table class="items">
   <tbody>
      <tr>
        <td>
         <p>
            Amount
            <br />
          </p>
          <p class="description">The minimum amount allowed is $160.00</p>
        </td>


        <td>$1.00</td>



        <td>
          <input type="number" class="quantity" value="160" min="160" />
          <a href="#" class="remove">Remove</a>
        </td>
        <td class="itemTotal">$160.00</td>
      </tr>
</tbody>
  </table>

  <Fieldset>
<legend>Extra features</legend>
<p><input type="checkbox" name="featured" value="Featured Project"/> Featured Project ($59.99)</p>
<p><input type="checkbox" name="featured" value="Private Project"/> Private project ($99.99)</p>
</fieldset>




  
  <div class="cost">
    <h2>Order Overview</h2>
    
    <table class="pricing">
      <tbody>
        <tr>
          <td>Subtotal</td>
          <td class="subtotal"></td>
        </tr>
        <tr>
          <td>13% Fee</td>
          <td class="tax"></td>
        </tr>
        <tr>
          <td>Post Fee</td>
          <td class="post">$99.99</td>
        </tr>
        <tr>
          <td><strong>Total:</strong></td>
          <td class="orderTotal"></td>
        </tr>
      </tbody>
    </table>
    
    <a class="cta" href="#">Checkout Now &raquo;</a>
  </div>
</div> <!-- End Content -->



    <script src='http://ift.tt/19puDaP'></script>
    <script src='http://ift.tt/12Xd0Gr'></script>

    <script src="Scripts/Cart.js"></script>

    
    
    
  </body>
</html>

checkbox

vendredi 1 avril 2016

Calculate total with check boxes included?

Aucun commentaire:

Enregistrer un commentaire