samedi 12 mars 2016

How to multiply item by quantity and total it?

I want to have an order page which allows the costumer to select an item and its quantity and then calculate the total amount ordered in a div.

Initially here's my code:

For the quantity jquery:

  <script> 
 $(function() {

 $(".numbers-row").append('<div class="inc button">+</div><div class="dec button">-</div>');

 $(".button").on("click", function() {

var $button = $(this);
var oldValue = $button.parent().find("input").val();

if ($button.text() == "+") {
  var newVal = parseFloat(oldValue) + "The Price";
} else {
   // Don't allow decrementing below zero
  if (oldValue > 0) {
    var newVal = parseFloat(oldValue) - "The Price";
    } else {
    newVal = 0;
  }
  }

$button.parent().find("input").val(newVal);

 });

  });

The HTML for the items:

 <ul>
    <li class="numbers-row">
    <label>
    <input class="calc" type="checkbox" name="combos[]" id="item2-title"  value="The Name"/>
    The Thumbnail<p>The Title</p>
    <input type="hidden" name="item1-val" value="The Price">
    </label>
    </li>

    <li class="numbers-row">
    <label>
    <input class="calc" type="checkbox" name="combos[]" id="item2-title"  value="The Name"/>
    The Thumbnail<p>The Title</p>
    <input type="hidden" name="item2-val" value="The Price">
    </label>
    </li>

     <li class="numbers-row">
    <label>
    <input class="calc" type="checkbox" name="combos[]" id="item2-title"  value="The Name"/>
    The Thumbnail<p>The Title</p>
    <input type="hidden" name="item2-val" value="The Price">
    </label>
    </li>

</ul>

My jquery for the total:

 <script type="text/javascript">
 function calcscore(){
      var score = 0;
        var checked=$(".calc:checked ~   input[type=hidden]").each(function(){
        score+=parseInt($(this).val());
        });
 $('#price').text(score.toFixed(2));
   }
  $(document).ready(function(){
  $(".calc").change(function(){
     calcscore()
 });
});
 </script>

And my HTML where the total price of the items will be shown:

 <p>Total: PHP <span id="price">0</span></p>

I cant seem to integrate all of them, any help?

There are actually a lot more items, but for the sake of simplifying we'll stick with 3.

PS I only basic jquery and PHP but I can copy paste to the least. Any input is greatly appreciated. Thanks guys




Aucun commentaire:

Enregistrer un commentaire