CODEWITHSUNDEEP
javascriptjquery
Tick Twitch
Tick Twitch

Reputation: 566

Calculate values from multiple number fileds - Jquery

I am trying to calculate price based on quantity and price and calculating a subtotal by adding all products prices.

below is the code of html

<tr>
    <td>
        <input min="0" data-unit-price="9.99" class="se-ticket-qty" type="number" value="0" />
    </td>
</tr>
<tr>
    <td>
        <input min="0" data-unit-price="19.99" class="se-ticket-qty" type="number" value="0" />
    </td>
</tr>
<tr>
    <td>
        <h3><span class="se-curency">$</span><span data-sub-total="0" id="se-sub-total" class="se-total-amount">0</span></h3>
        <h3><span class="se-curency">$</span><span id="se-vat" class="se-total-amount">8</span></h3>
    </td>
</tr>

And I am trying The below js

jQuery( document ).on( 'input', '.se-ticket-qty', function() {
    var sum = 0;
    jQuery(this).each(function(i){
        var unit_price = jQuery(this).data('unit-price');
        var amount = jQuery(this).val();

        var current_sub_total = parseFloat(unit_price);

        sum += current_sub_total;

        var sub_total = jQuery('#se-sub-total').attr('data-sub-total');

        var final_sub_total = parseFloat(sub_total) + sum;
        jQuery('#se-sub-total').attr('data-sub-total', final_sub_total.toFixed(2));
        jQuery('#se-sub-total').html(final_sub_total.toFixed(2));
    });
    console.log(sum);
});

But There is an error in calculating.The sub total is working fine if I use upper arrow in number field.But if i use below arrow or input an number by manually it is not working.

Upvotes: 0

Views: 64

Answers (1)

MUlferts
MUlferts

Reputation: 1330

It looks like you just had a few small issues with how you were using each logic and adding up the totals. Here is a snippet that does what I think you were trying to do. Just un-comment the console.logs to see how the order of operations changed how the final sum is calculated. I am not sure what you wanted with the second display with 8$:

// Shorthand for $( document ).ready()
$(function() {
   console.log( "ready!" );
        
   $(document).on('input', '.se-ticket-qty', function(){
     CalculateTotal();
   });
});

function CalculateTotal(){
  var sum = 0;
      
  $(".tableWithInputs").find( ".se-ticket-qty" ).each(function( index ){
    var unit_price = parseFloat($(this).data('unit-price'));
  var amount = parseFloat($(this).val());
  var totalPrice = unit_price * amount;
  //console.log("unit_price: " + unit_price);
  //console.log("unit_price: " + unit_price);
  //console.log("amount: " + amount);
  //console.log("totalPrice: " + totalPrice);

        sum += parseFloat(totalPrice); 
      });
      
      $('#se-sub-total').attr('data-sub-total', sum.toFixed(2));
      $('#se-sub-total').text(sum.toFixed(2));
      //console.log(sum.toFixed(2));
    }

     
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tableWithInputs">
    <tr>
        <td>
            <input min="0" data-unit-price="9.99" class="se-ticket-qty" type="number" value="0" />
        </td>
    </tr>
    <tr>
        <td>
            <input min="0" data-unit-price="19.99" class="se-ticket-qty" type="number" value="0" />
        </td>
    </tr>
    <tr>
        <td>
        <h3><span class="se-curency">$</span><span data-sub-total="0" id="se-sub-total" class="se-total-amount">0</span></h3>
        <h3><span class="se-curency">$</span><span id="se-vat" class="se-total-amount">8</span></h3>
    </td>
    </tr>
 </table>

Upvotes: 1

Related Questions