Calculator

by Luis E. Ibarra

HTML

<?php include "inc/config/ladies_items_config.php"; ?>

<!--------------------------- ITEM 1l ---------------------------->
<fieldset class="item-fieldset" form="itemsForm">

  <legend>
    <?php echo $itm1l ?>
  </legend>

  <div class="item_image_container">
    <a href="<?php echo $img1l_full_lnk ?>" target="_blank">
	<img class="item_image" src="<?php echo $img1l_82px_lnk ?>" /></a>
    <span class="click_full_image">Click for full size</span>
  </div>
  <!-- ITEM_IMAGE div CLOSE -->

  <table class="inputs" border="1" cellspacing="1">
    <tbody>
      <tr class="gridaddrows">
        <td colspan="8" class="radius">
          <div class="itemdesc">Ladies Organic Tee Shirt
            <?php echo $des1l ?>
          </div>
        </td>
      </tr>
      <tr class="gridrows">
        <td class="gridtitle">XS
          <?php echo $itm1l_size_xs ?>
        </td>
        <td class="gridtitle">SM
          <?php echo $itm1l_size_sm ?>
        </td>
        <td class="gridtitle">MD
          <?php echo $itm1l_size_md ?>
        </td>
        <td class="gridtitle">LG
          <?php echo $itm1l_size_lg ?>
        </td>
        <td class="gridtitle">XL
          <?php echo $itm1l_size_xl ?>
        </td>
        <td class="gridtitle">XX
          <?php echo $itm1l_size_xx ?>
        </td>
        <td class="gridtitle">Total Pcs</td>
      </tr>
      <tr>
        <td><input type="number" class="item1l" min="0" max="288" name="item1lQty[]" placeholder="Qty" autocomplete="off" style="visibility: <?php echo $itm1l_xs_visi ?>"><br>
          <span class="price" style="visibility: <?php echo $itm1l_xs_visi ?>">11.25<?php //echo $price1l ?></span></td>

        <td><input type="number" class="item1l" min="0" max="288" name="item1lQty[]" placeholder="Qty" autocomplete="off" style="visibility: <?php echo $itm1l_sm_visi ?>"><br>
          <span class="price" style="visibility: <?php echo $itm1l_sm_visi ?>">11.25<?php //echo...

CSS

fieldset{
  width: 80%;
  text-align: center;
}

input{
  width: 70%;
  text-align: center;
  margin: 10px auto 0;
}

JavaScript

// ********** LADIES PRICE TOTALS **********
$(document).on('click keyup', '.item1l', function() {
  $('.item1l').each(function() {
    var qty = parseInt($('.item1ltotal').val(), 10);
    var price = parseFloat($('.price').text()).toFixed(2);
    $('#total').text((qty * price ? qty * price : 0).toFixed(2));
		console.log(price);

    //   SUMMATION OF CATEGORY QTY TOTALS
    // ********** LADIES QUANTITY TOTALS **********
    var sum = 0;
    $(".item1l").each(function() {
      sum += +$(this).val();
    });
    $(".item1ltotal").val(sum);
  });
});