0

I FOUND MY ANSWER - ABSOLUTE BONEHEAD MISTAKE!!! :) Having a "$" sign before the price digits being loaded from the PHP include file was preventing the jQuery from calculating the sum of the prices! I removed the dollar sign and all is well with the world!!! :) Thanks everyone for trying!

I want to use a PHP include file to populate the span element with price info...

If the item pricing is loaded by using a PHP include, the summation will not work! If I hard-code the prices into the < span > element, the price summation works fine. Why?? ..............

Here is jsFiddle of how it should work. Problem is when I use the PHP include file to load the price data the summation stops... https://jsfiddle.net/luenib/k2nj6d8w/ 

<!--------------------------- ITEM 1l ---------------------------->
<fieldset class="item-fieldset" form="itemsForm">
<?php include "inc/config/ladies_items_config.php"; ?>
<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"><?php echo $des1l ?></div>
</td>
</tr>
<tr class="gridrows">
<td class="gridtitle"><?php echo $itm1l_size_xs ?></td> 
<td class="gridtitle"><?php echo $itm1l_size_sm ?></td>
<td class="gridtitle"><?php echo $itm1l_size_md ?></td>
<td class="gridtitle"><?php echo $itm1l_size_lg ?></td>
<td class="gridtitle"><?php echo $itm1l_size_xl ?></td>
<td class="gridtitle"><?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 ?>"><?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 ?>"><?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_md_visi ?>"><br>
<span class="price" style="visibility: <?php echo $itm1l_md_visi ?>"><?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_lg_visi ?>"><br>
<span class="price" style="visibility: <?php echo $itm1l_lg_visi ?>"><?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_xl_visi ?>"><br>
<span class="price" style="visibility: <?php echo $itm1l_xl_visi ?>"><?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_xx_visi ?>"><br>
<span class="price" style="visibility: <?php echo $itm1l_xx_visi ?>"><?php 
echo $price1l_xx ?></span></td>

<td><input type="number" class="item1ltotal" placeholder="0" readonly/><br>
$<span id='total'>0.00</span></td>
</tr>
</tbody>
</table>        
</fieldset>

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="js/custom.js"></script>

</body>
</html>

CODE BELOW IS IN THE "custom.js" FILE

// ********** LADIES PRICE TOTAL **********
$(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);

// ********** LADIES QUANTITY TOTAL **********
var sum = 0;
$(".item1l").each(function() {
  sum += +$(this).val();
});
$(".item1ltotal").val(sum);
});
});
Bigfootbud
  • 103
  • 1
  • 10
  • I think you have an extra `+` after `=` here `sum += +$(this).val();` – Zain Farooq Sep 03 '18 at 06:33
  • And your `php` code won't run in .html file – Zain Farooq Sep 03 '18 at 06:35
  • What do you mean the sum "doesn't work"? Does it display 0? Nothing? Please be more accurate. – Jeto Sep 03 '18 at 06:36
  • Possible duplicate of [What is the difference between client-side and server-side programming?](https://stackoverflow.com/questions/13840429/what-is-the-difference-between-client-side-and-server-side-programming) – Adrian W Sep 03 '18 at 06:37
  • `var price = parseFloat($('.price').text()).toFixed(2);` that line is fishy. You have multiple elements with the `price` class and you're retrieving the text content of all of them at the same time... – Jeto Sep 03 '18 at 06:39
  • @AdrianW I understand the differences. But why does the code work when I hard-code the prices into the span, and not when I use the PHP include to add the prices? – Bigfootbud Sep 03 '18 at 06:47
  • @Jeto See the jsFiddle link https://jsfiddle.net/luenib/k2nj6d8w/... works great like that when prices are hard-coded, does not work when I use the php include... – Bigfootbud Sep 03 '18 at 06:50
  • @Bigfootbud This is pure luck actually :) Add a `console.log($('.price').text());` before you use it and see what it contains in your fiddle: `11.2511.2511.2511.2511.2512.25 11.25`. If you use different values instead of 11.25 all the time it'll stop working because they'll all evaluate to the first one (11.25). – Jeto Sep 03 '18 at 07:02
  • @Jeto Yes, I got a fix for that from another SO question I asked... thanks! :) – Bigfootbud Sep 03 '18 at 07:04

0 Answers0